/* Geist and Geist Mono, SIL Open Font License 1.1: /fonts/OFL.txt */
/* geist-latin-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* geist-latin-ext-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* geist-mono-latin-wght-normal */
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* geist-mono-latin-ext-wght-normal */
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Taxpresso website, in the coffee theme (SPEC.md section 11b). The receipt printer and the
   principle cards are the loud elements; everything else stays quiet. The logo's own rules come
   from ui/src/shared/logo.css, added by build.ts. */

:root {
  --foam: #f6f0e8;
  --cup: #ffffff;
  --espresso: #1e1612;
  --roast: #5a3825;
  --roast-dark: #4a2c1d;
  --crema: #d7a86e;
  --caramel: #9a5a28;
  --latte: #eadccb;
  --mocha: #6b5e55;
  --line: #e4d8ca;
  --matcha: #dcead9;
  --swiss: #da291c;

  --font: 'Geist Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono Variable', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --page: 1160px;
  --gutter: 32px;

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--foam);
  color: var(--espresso);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--caramel);
}

:focus-visible {
  outline: 2px solid var(--caramel);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  padding: 10px 14px;
  background: var(--espresso);
  color: var(--cup);
  border-radius: 10px;
  z-index: 2;
}

.skip:focus {
  top: 12px;
}

/* Buttons and small labels */

.btn {
  min-height: 48px;
  padding: 12px 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  font-weight: 650;
  font-size: 16px;
  text-decoration: none;
}

.btn-primary {
  background: var(--roast);
  color: var(--cup);
}

.btn-primary:hover {
  background: var(--roast-dark);
  color: var(--cup);
}

.btn-quiet {
  box-shadow: inset 0 0 0 1.5px var(--roast);
  color: var(--roast);
}

.btn-quiet:hover {
  background: var(--roast);
  color: var(--cup);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.badge svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.ch {
  border-radius: 4px;
}

/* Top bar */

.top {
  max-width: var(--page);
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  font-size: 30px;
  text-decoration: none;
  color: var(--espresso);
}

.brand:hover {
  color: var(--espresso);
}

.sections {
  display: flex;
  gap: 24px;
  margin-left: auto;
  font-size: 15px;
}

.sections a {
  text-decoration: none;
  color: var(--mocha);
  white-space: nowrap;
}

.sections a:hover {
  color: var(--espresso);
}

.top-start {
  min-height: 40px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--espresso);
  color: var(--foam);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.top-start:hover,
.top-start[aria-current='page'] {
  background: var(--roast);
  color: var(--cup);
}

.langs {
  position: relative;
  font-size: 14px;
  font-weight: 600;
}

.langs summary {
  min-height: 40px;
  padding: 0 10px 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  color: var(--mocha);
  box-shadow: inset 0 0 0 1px var(--line);
  background: var(--cup);
  cursor: pointer;
  list-style: none;
}

.langs summary::-webkit-details-marker {
  display: none;
}

.langs summary:hover,
.langs[open] summary {
  color: var(--espresso);
}

.langs[open] summary svg:last-child {
  transform: rotate(180deg);
}

.langs ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 3;
  min-width: 220px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--cup);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px var(--line),
    0 16px 32px rgba(30, 22, 18, 0.14);
}

.langs li a {
  min-height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--espresso);
}

.langs li a:hover {
  background: var(--foam);
  color: var(--espresso);
}

.langs li a[aria-current='page'] {
  background: var(--latte);
}

.langs .code {
  color: var(--mocha);
  font-weight: 500;
  font-size: 13px;
}

.langs .suggest {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.langs .suggest a {
  color: var(--caramel);
}

/* Hero: the tagline and the receipt */

.hero {
  max-width: var(--page);
  margin: 0 auto;
  padding: 48px var(--gutter) 104px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr);
  gap: 64px;
  align-items: start;
}

.hero h1 {
  margin: 0;
  max-width: 13ch;
  font-size: clamp(3rem, 7vw, 5.9rem);
  line-height: 0.96;
  font-weight: 800;
  letter-spacing: -0.048em;
  text-wrap: balance;
  hyphens: manual;
}

.lead {
  margin: 30px 0 0;
  max-width: 34em;
  font-size: 20px;
  line-height: 1.5;
  color: var(--mocha);
}

.cta {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.more {
  font-weight: 600;
  font-size: 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.avail {
  margin: 28px 0 0;
  font-size: 15px;
  color: var(--mocha);
}

.badges {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.badges .badge {
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  background: var(--cup);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* The receipt printer. The ticket prints once when the page opens. */

.printer {
  margin: 8px 0 0;
  width: 100%;
  max-width: 420px;
  justify-self: end;
  transform: rotate(1.6deg);
}

.slot {
  position: relative;
  z-index: 1;
  height: 18px;
  border-radius: 999px;
  background: var(--espresso);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.35);
}

.clip {
  margin: -9px 18px 0;
  padding: 0 0 36px;
  overflow: hidden;
  filter: drop-shadow(0 16px 22px rgba(59, 36, 23, 0.16));
}

.ticket {
  --tooth: 14px;
  background: var(--cup);
  padding: 34px 22px calc(28px + var(--tooth));
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth)
      calc(var(--tooth) / 2) repeat-x,
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth) / 2 + 1px) no-repeat;
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth)
      calc(var(--tooth) / 2) repeat-x,
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth) / 2 + 1px) no-repeat;
  animation: print 1.7s cubic-bezier(0.2, 0.75, 0.25, 1) 0.2s both;
}

@keyframes print {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.t-head {
  margin: 0;
  text-align: center;
  font-family: var(--font);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.t-sub {
  margin: 2px 0 20px;
  text-align: center;
  color: var(--mocha);
}

.t-lines {
  margin: 0;
  padding: 16px 0;
  list-style: none;
  border-top: 1.5px dashed #d9cbbb;
  border-bottom: 1.5px dashed #d9cbbb;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.t-lines li,
.t-total {
  display: flex;
  align-items: baseline;
}

.dots {
  flex: 1;
  min-width: 14px;
  margin: 0 8px;
  border-bottom: 1.5px dotted #c9b8a6;
  transform: translateY(-4px);
}

.st {
  white-space: nowrap;
}

.st-ok {
  color: #2e6a4e;
  font-weight: 600;
}

.st-confirm {
  color: #2d4f8c;
  font-weight: 600;
}

.t-total {
  margin: 16px 0 0;
  font-size: 15px;
  font-weight: 700;
}

.t-cup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.t-cup .tp-cup {
  width: 20px;
  height: 20px;
}

.t-foot {
  margin: 22px 0 0;
  text-align: center;
  color: var(--mocha);
  font-size: 12.5px;
}

/* Sections below the fold */

.band {
  max-width: var(--page);
  margin: 0 auto;
  padding: 88px var(--gutter);
}

.band h2,
.start h2 {
  margin: 0 0 36px;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
  font-weight: 750;
  letter-spacing: -0.03em;
}

.band h3,
.start h3 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.band p {
  margin: 0;
  max-width: 38em;
}

.band-lead {
  margin: -20px 0 36px !important;
  font-size: 20px;
  color: var(--mocha);
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}

.num {
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--crema);
  color: var(--espresso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 750;
  flex: none;
}

.steps p {
  color: var(--mocha);
}

/* Principles: one cup of latte art per card, each card its own drink */

.pgrid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.pc {
  --tp-rim: currentColor;
  --tp-crema: #9a5a28;
  --milk: #f6f0e8;
  min-height: 240px;
  padding: 26px 28px 30px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pc h3 {
  margin: 0 0 6px;
  font-size: 21px;
}

.pc p {
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.86;
}

.pc-cup {
  width: 64px;
  height: 64px;
  flex: none;
}

.pc-wide {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  gap: 32px;
}

.pc-wide .pc-cup {
  width: 112px;
  height: 112px;
}

.pc-wide h3 {
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
}

.la {
  fill: var(--milk);
}

.la-line {
  fill: none;
  stroke: var(--milk);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.la-thick {
  stroke-width: 7.5;
}

.la-cut {
  fill: none;
  stroke: var(--tp-crema);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.la-ring {
  fill: none;
  stroke: var(--milk);
  stroke-width: 1.6;
  opacity: 0.55;
}

.pc-espresso {
  background: var(--espresso);
  color: #f3ebe1;
}

.pc-crema {
  background: var(--crema);
  color: var(--espresso);
}

.pc-white {
  background: var(--cup);
  box-shadow: inset 0 0 0 1px var(--line);
}

.pc-latte {
  background: var(--latte);
}

.pc-roast {
  background: var(--roast);
  color: #f6f0e8;
}

.pc-matcha {
  background: var(--matcha);
  color: #1d3b2c;
}

.pc-swiss .ch {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 10px;
}

/* Free, for good: a star (free) or a tip (for the association) */

.free-intro p {
  font-size: 19px;
  color: var(--mocha);
}

.free-grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 18px;
  align-items: stretch;
}

.star-card,
.tip-card {
  padding: 30px 30px 32px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.star-card {
  background: var(--cup);
  box-shadow: inset 0 0 0 1px var(--line);
}

.star-card h3,
.tip-card h3 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.star-card p {
  color: var(--mocha);
  font-size: 16px;
}

.star-mark {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--latte);
  color: var(--roast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.star-mark svg {
  width: 30px;
  height: 30px;
  fill: var(--crema);
}

.star-card .btn {
  margin-top: auto;
  align-self: flex-start;
  gap: 8px;
}

.star-card .btn svg {
  width: 18px;
  height: 18px;
  fill: var(--crema);
  stroke: var(--crema);
}

/* The tip menu: a café chalkboard. */
.tip-card {
  background: var(--espresso);
  color: #f3ebe1;
}

.menu {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 16px;
}

.menu li {
  display: flex;
  align-items: baseline;
}

.tip-card .dots {
  border-bottom-color: #5a4a3e;
}

.amount {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  white-space: nowrap;
  color: var(--crema);
}

/* The free item: opens to the ways to leave a review. */
.menu .menu-review {
  display: block;
}

.menu-review summary {
  display: flex;
  align-items: baseline;
  cursor: pointer;
  list-style: none;
  border-radius: 6px;
}

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

.menu-review summary span:first-child {
  text-decoration: underline;
  text-decoration-color: #8a705c;
  text-underline-offset: 4px;
}

.menu-review summary:hover span:first-child,
.menu-review details[open] summary span:first-child {
  text-decoration-color: var(--crema);
}

.menu-review summary:focus-visible {
  outline: 2px solid var(--crema);
  outline-offset: 3px;
}

.review-ways {
  margin: 10px 0 4px;
  padding: 0 0 0 14px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 2px solid #5a4a3e;
  font-size: 15px;
}

.review-ways a {
  color: #f3ebe1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.review-ways a:hover {
  color: var(--crema);
}

.review-ways svg {
  width: 15px;
  height: 15px;
  fill: var(--crema);
  stroke: var(--crema);
}

/* A few words, posted to api/review.mjs (filed privately; quoted only with permission). */
.review-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 30em;
}

.review-form label {
  font-size: 14px;
  color: #c9b8a6;
}

.review-form textarea,
.review-form input[type='text'],
.review-form input:not([type]) {
  font: inherit;
  font-size: 15px;
  color: var(--espresso);
  background: #f3ebe1;
  border: 1px solid #5a4a3e;
  border-radius: 10px;
  padding: 8px 10px;
}

.review-form textarea {
  resize: vertical;
  min-height: 5.5em;
}

.review-form textarea:focus-visible,
.review-form input:focus-visible {
  outline: 2px solid var(--crema);
  outline-offset: 2px;
}

.review-form .review-quote {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: #f3ebe1;
  margin-top: 4px;
}

.review-form .review-quote input {
  margin-top: 3px;
  accent-color: var(--crema);
}

.review-form .btn {
  align-self: flex-start;
  margin-top: 6px;
}

/* A field only bots fill in. */
.review-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Shown when the review comes back (the function sends you to #review-thanks or #review-error). */
.review-msg {
  display: none;
  margin: 4px 0 0 !important;
  padding: 10px 12px;
  border-radius: 10px;
  background: #3a2d24;
  color: #f3ebe1;
  font-size: 15px;
}

.review-msg:target {
  display: block;
}

.review-msg-error {
  box-shadow: inset 3px 0 0 #e08a6a;
}

/* What people say: quotes as written, with the name they chose. */
.voice {
  margin: 4px 0 0;
}

.voice blockquote {
  margin: 0;
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--roast);
}

.voice blockquote p {
  margin: 0;
}

.voice blockquote p::before {
  content: '“';
}

.voice blockquote p::after {
  content: '”';
}

.voice figcaption {
  margin-top: 8px;
  font-size: 15px;
  color: var(--mocha);
}

.voices-more {
  margin-top: auto !important;
  padding-top: 8px;
  font-size: 15px !important;
}

.tip-note {
  margin-top: 8px !important;
  font-size: 15px;
  color: #c9b8a6;
}

.tip-card .btn {
  align-self: flex-start;
}

.btn-crema {
  background: var(--crema);
  color: var(--espresso);
}

.btn-crema:hover {
  background: #e2b98a;
  color: var(--espresso);
}

.ppb {
  margin-top: 22px !important;
  max-width: 52em !important;
  font-size: 15px;
  color: var(--mocha);
}

/* Make it better with us */

.help-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.help-card {
  height: 100%;
  padding: 22px 22px 24px;
  border-radius: 20px;
  background: var(--cup);
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: var(--espresso);
}

.help-card:hover {
  color: var(--espresso);
  box-shadow: inset 0 0 0 1.5px var(--roast);
}

.help-card svg {
  color: var(--caramel);
}

.help-card h3 {
  margin: 0 !important;
  font-size: 18px !important;
}

.help-card p {
  font-size: 15px;
  color: var(--mocha);
}

/* The fine print */

.fine {
  padding-top: 24px;
}

.fine-box {
  padding: 28px 30px;
  border-radius: 20px;
  background: var(--latte);
}

.fine-box h2 {
  margin: 0 0 10px;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.fine-box p {
  max-width: 62em;
  font-size: 15.5px;
  color: #4e443d;
}

/* Questions */

.qa {
  max-width: 46em;
  border-top: 1px solid var(--line);
}

.qa details {
  border-bottom: 1px solid var(--line);
}

.qa summary {
  min-height: 64px;
  padding: 18px 44px 18px 0;
  position: relative;
  display: flex;
  align-items: center;
  font-size: 19px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa summary::after {
  content: '+';
  position: absolute;
  right: 8px;
  font-size: 24px;
  font-weight: 400;
  color: var(--mocha);
  transition: transform 0.2s ease;
}

.qa details[open] summary::after {
  transform: rotate(45deg);
}

.qa details p {
  padding: 0 0 22px;
  color: var(--mocha);
}

/* Get started page */

.start {
  max-width: var(--page);
  margin: 0 auto;
  padding: 24px var(--gutter) 64px;
}

.start-hero {
  padding: 44px 48px;
  border-radius: 32px;
  background: var(--espresso);
  color: #f3ebe1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}

.start-hero h1 {
  margin: 0;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.start-hero .lead {
  color: #d9c8b4;
}

.dl-row {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.btn-big {
  min-height: 56px;
  padding: 14px 28px;
  font-size: 17px;
  border-radius: 14px;
}

.dl-note {
  font-size: 15px;
  color: #c9b8a6;
}

.platforms {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.platforms li {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #5a4a3e;
  color: #f3ebe1;
}

.start-hero-art {
  --tp-rim: #f3ebe1;
}

.start-hero-art .tp-cup {
  width: clamp(120px, 16vw, 200px);
  height: clamp(120px, 16vw, 200px);
}

.start-sec {
  margin-top: 72px;
}

.start h2 {
  margin: 0 0 24px;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1.1;
  font-weight: 750;
  letter-spacing: -0.03em;
}

.start h3 {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.start p {
  margin: 0;
}

.needs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.need {
  padding: 24px 24px 26px;
  border-radius: 20px;
  background: var(--cup);
  box-shadow: inset 0 0 0 1px var(--line);
}

.need p {
  font-size: 16px;
  color: var(--mocha);
}

.need-mark {
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--latte);
  color: var(--roast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The steps: a timeline, with a picture where it helps. */
.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 760px;
}

.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 22px;
  padding-bottom: 36px;
}

.timeline li:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 44px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}

.timeline .num {
  margin: 0;
}

.step-body p {
  color: var(--mocha);
}

.dl {
  margin-top: 16px !important;
}

.mock {
  margin-top: 18px;
  max-width: 460px;
  border-radius: 14px;
  background: var(--cup);
  box-shadow:
    0 0 0 1px var(--line),
    0 12px 28px rgba(30, 22, 18, 0.1);
  overflow: hidden;
}

.mock-bar {
  padding: 10px 12px;
  display: flex;
  gap: 6px;
  background: var(--foam);
  border-bottom: 1px solid var(--line);
}

.mock-bar i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #d9cbbb;
}

.mock-body {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.mock-icon svg {
  width: 48px;
  height: 48px;
  display: block;
}

.mock-name {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: var(--mocha);
  line-height: 1.35;
}

.mock-name strong {
  font-size: 16px;
  color: var(--espresso);
}

.mock-btn {
  margin-left: auto;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--roast);
  color: var(--cup);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

.prompt {
  margin: 18px 0 0;
  max-width: 460px;
  padding: 14px 18px;
  border-radius: 16px 16px 16px 4px;
  background: var(--cup);
  box-shadow: inset 0 0 0 1px var(--line);
}

.prompt figcaption {
  font-size: 13px;
  color: var(--mocha);
}

.prompt p {
  margin-top: 2px !important;
  font-size: 18px;
  font-weight: 600;
  color: var(--espresso) !important;
  user-select: all;
}

.notes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.note {
  padding: 24px 26px;
  border-radius: 20px;
  background: var(--cup);
  box-shadow: inset 0 0 0 1px var(--line);
}

.note:first-child {
  background: var(--espresso);
  color: #f3ebe1;
  box-shadow: none;
}

.note p {
  font-size: 15.5px;
  opacity: 0.86;
}

.back {
  margin: 48px 0 0;
  font-weight: 600;
}

/* Links to the guides, under the questions and on the Get started page */

.qa-more,
.start-guides {
  margin: 22px 0 0 !important;
  max-width: 46em;
  font-size: 16px;
  color: var(--mocha);
}

.qa-more a,
.start-guides a {
  font-weight: 600;
  color: var(--espresso);
}

/* Guides: an index of cards, then one quiet reading page per guide. */

.guides {
  max-width: var(--page);
  margin: 0 auto;
  padding: 24px var(--gutter) 64px;
}

.guides-hero {
  padding: 44px 48px;
  border-radius: 32px;
  background: var(--espresso);
  color: #f3ebe1;
}

.guides-hero h1 {
  margin: 0;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.guides-hero .lead {
  color: #d9c8b4;
}

.guide-list {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.guide-card {
  height: 100%;
  padding: 24px 24px 22px;
  border-radius: 20px;
  background: var(--cup);
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
}

.guide-card:hover {
  color: inherit;
  box-shadow: inset 0 0 0 2px var(--crema);
}

.guide-card h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.guide-card p {
  margin: 0;
  font-size: 15.5px;
  color: var(--mocha);
}

.guide-go {
  margin-top: auto;
  padding-top: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--caramel);
}

.guide-basis {
  margin: 32px 0 0;
  max-width: 46em;
  font-size: 14.5px;
  color: var(--mocha);
}

.guide {
  max-width: 46em;
}

.crumb {
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 600;
}

.guide h1 {
  margin: 14px 0 0;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.guide .lead {
  margin-top: 18px;
}

.guide section {
  margin-top: 40px;
}

.guide h2 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.guide p {
  margin: 0 0 12px;
}

.guide section ul {
  margin: 0 0 12px;
  padding-left: 1.2em;
}

.guide section li {
  margin: 6px 0;
}

.guide-sources {
  margin-top: 48px;
  padding: 26px 28px;
  border-radius: 20px;
  background: var(--latte);
}

.guide-sources h2 {
  font-size: 20px;
}

.guide-sources ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-sources li {
  margin: 8px 0;
}

.guide-sources a {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.guide-sources a::after {
  content: ' ↗';
}

.guide-sources p {
  margin: 12px 0 0;
  font-size: 14.5px;
  color: #4e443d;
}

.guide-more {
  margin-top: 56px;
  max-width: 46em;
}

.guide-more h2 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 650;
}

.guide-more ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.guide-more li {
  border-bottom: 1px solid var(--line);
}

.guide-more a {
  min-height: 52px;
  padding: 10px 0;
  display: flex;
  align-items: center;
  font-weight: 600;
  text-decoration: none;
}

/* Privacy policy: a guide page with its date under the title. */

.policy {
  padding-top: 24px;
}

.updated {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--mocha);
}

/* Geneva reference pages: quiet tables and cards, every figure in mono with its source under it. */

.ref-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ref-year {
  width: fit-content;
  margin: 16px 0 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--latte);
  color: var(--espresso);
  font-size: 14px;
  font-weight: 600;
}

.ref .ref-year {
  margin: 16px 0 0;
}

.guides-hero .ref-year {
  margin-top: 22px;
  background: var(--crema);
}

.fig {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.94em;
  white-space: nowrap;
}

/* Dates aren't amounts: they keep the text font. */
.fig-date {
  font-family: var(--font);
  font-size: 1em;
  white-space: normal;
}

.ref section {
  margin-top: 32px;
}

.ref-table {
  width: 100%;
  margin-top: 28px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
  background: var(--cup);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 16px;
}

.ref-table th,
.ref-table td {
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.ref-table thead th {
  font-size: 14px;
  font-weight: 600;
  color: var(--mocha);
}

.ref-table tbody th {
  font-weight: 600;
}

.ref-table tbody tr:last-child th,
.ref-table tbody tr:last-child td {
  border-bottom: 0;
}

.ref-table .ref-num {
  text-align: right;
}

.ref .cite {
  margin: 4px 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: #4e443d;
}

.cite-label,
.cite-year {
  font-weight: 600;
}

.cite a,
.cite-inline a {
  overflow-wrap: anywhere;
}

.cite-inline a {
  font-weight: 600;
}

.cite a::after,
.cite-inline a::after {
  content: ' ↗';
}

.ref-cards {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.ref-card {
  padding: 22px 24px;
  border-radius: 14px;
  background: var(--cup);
  box-shadow: inset 0 0 0 1px var(--line);
}

.ref .ref-card h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 650;
}

.ref-when {
  margin: 8px 0 6px !important;
  font-size: 22px;
  font-weight: 600;
  color: var(--roast);
}

.ref-when .fig {
  font-size: 1em;
}

.ref-card .cite:last-child {
  margin-bottom: 0;
}

.ref-lines {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.ref-lines li {
  margin: 8px 0;
}

.ref-tax {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--mocha);
}

.ref-check {
  margin: 36px 0 0 !important;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--latte);
  font-weight: 600;
  max-width: 46em;
}

.ref-cta {
  max-width: 46em;
  margin-top: 40px;
  padding: 28px;
  border-radius: 20px;
  background: var(--espresso);
  color: #f3ebe1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
}

.ref-cta h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
}

.ref-cta p {
  margin: 6px 0 0;
  max-width: 30em;
  color: #d9c8b4;
}

/* Canton reference pages: the same quiet tables and cards; a wide table scrolls inside its frame,
   with the commune names held in place. */

.ref-note {
  margin: 18px 0 0 !important;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--latte);
  max-width: 46em;
}

.ref-toc {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 15px;
  font-weight: 600;
}

.ref-toc span {
  color: var(--mocha);
  font-weight: 500;
}

.ref-canton section .ref-cards {
  margin: 20px 0 0;
  padding: 0;
}

.ref-canton section .ref-cards > li {
  margin: 0;
}

.ref-canton section .ref-lines {
  padding: 0;
}

.ref-rates .ref-tax {
  display: inline;
  margin-right: 10px;
}

.ref-scroll {
  margin-top: 20px;
  max-width: 100%;
  overflow-x: auto;
  border-radius: 14px;
}

.ref-scroll:focus-visible {
  outline: 2px solid var(--crema);
  outline-offset: 2px;
}

.ref-scroll {
  border: 1px solid var(--line);
  background: var(--cup);
}

.ref-scroll .ref-table {
  margin-top: 0;
  border-radius: 0;
  box-shadow: none;
}

.ref-communes thead th {
  vertical-align: bottom;
}

.ref-communes tbody th,
.ref-communes thead th:first-child {
  position: sticky;
  left: 0;
  background: var(--cup);
}

.ref-communes td {
  white-space: nowrap;
}

.ref .ref-card h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 650;
}

.ref-small {
  font-size: 14.5px;
  color: var(--mocha);
}

.guide-card .ref-tag {
  width: fit-content;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--latte);
  font-size: 13.5px;
  color: var(--espresso);
}

/* Footer */

.foot {
  max-width: var(--page);
  margin: 0 auto;
  padding: 36px var(--gutter) 56px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--mocha);
}

.foot p {
  margin: 0;
  max-width: 60em;
}

.foot-links {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  font-weight: 600;
  color: var(--espresso);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .ticket {
    animation: none;
  }
  .qa summary::after {
    transition: none;
  }
}

@media (max-width: 960px) {
  .sections {
    display: none;
  }
  .top-start {
    margin-left: auto;
  }
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    padding-bottom: 80px;
  }
  .printer {
    justify-self: start;
  }
  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .pgrid,
  .help-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .free-grid,
  .needs,
  .start-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .guide-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .start-hero-art {
    display: none;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
  }
  body {
    font-size: 17px;
  }
  .top {
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .brand {
    font-size: 24px;
  }
  .top-start {
    padding: 8px 12px;
    font-size: 14px;
  }
  .hero {
    padding-top: 24px;
  }
  .lead {
    font-size: 18px;
    margin-top: 22px;
  }
  .band {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .printer {
    transform: rotate(1deg);
  }
  .pgrid,
  .help-grid,
  .notes,
  .guide-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .start-hero,
  .guides-hero {
    padding: 28px 22px;
    border-radius: 24px;
  }
  .guide-sources {
    padding: 22px 20px;
  }
  .ref-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .ref-table th,
  .ref-table td {
    padding: 9px 10px;
  }
  .ref-table {
    font-size: 15px;
  }
  .ref-card,
  .ref-cta {
    padding: 20px;
  }
  .ref-when {
    font-size: 19px;
  }
  .mock-body {
    flex-wrap: wrap;
  }
  .pc-wide {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .pc-wide .pc-cup {
    width: 72px;
    height: 72px;
  }
}

/* Very narrow phones (320 px): the header still fits on one line. */
@media (max-width: 380px) {
  .top {
    gap: 8px;
  }
  .brand {
    font-size: 21px;
  }
  .top-start {
    padding: 7px 10px;
    font-size: 13px;
  }
  .langs summary {
    padding: 0 8px;
    gap: 4px;
  }
}

/* The hero's tagline: the last o of "espresso" is the cup from the logo (render.ts cupO()). It plays
   the logo's motion once, a moment after the logo in the bar, and a warm glow blooms behind it when
   the check lands. The letter stays in the text, transparent, and the cup is drawn over it. With
   reduced motion the cup shows the finished mark and nothing glows. */

.hero h1 {
  position: relative;
  z-index: 0;
}

/* The cup is wider than the letter o: let the heading reach into the gap beside it, so it wraps as
   the plain text would. */
@media (min-width: 961px) {
  .hero h1 {
    margin-right: -0.36em;
  }
}

.hero .cupo-word {
  white-space: nowrap;
}

.hero .cupo {
  --tp-delay: 0.35s;
  position: relative;
  display: inline-block;
  width: 0.86em;
  margin: 0 0.012em 0 0.04em;
  color: transparent;
  text-align: center;
}

.hero .cupo .tp-cup {
  position: absolute;
  left: 0;
  bottom: -0.035em;
  width: 0.86em;
  height: 0.86em;
  color: var(--espresso);
}

.hero .cupo::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0.395em;
  width: 2.2em;
  height: 2.2em;
  margin: 0 0 -1.1em -1.1em;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgb(215 168 110 / 0.5),
    rgb(215 168 110 / 0.18) 55%,
    rgb(215 168 110 / 0)
  );
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero .cupo::before {
    animation: cupo-bloom 1.5s calc(var(--tp-delay) + 1.2s) cubic-bezier(0.3, 0, 0.3, 1) backwards;
  }
}

@keyframes cupo-bloom {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  35% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(1.05);
  }
}

/* The Taxpresso mark, see logo.ts. The rim takes the text color, so the wordmark works on light and
   dark grounds. Motion: sugar cube. It plays once (1.43 s) under `tp-play`; at rest, and with
   reduced motion, the finished mark shows, the same cup as the static mark. Set --tp-delay on an
   ancestor to start a cup later. */
.tp-word {
  display: inline-flex;
  align-items: center;
  gap: 0.02em;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
}
.tp-word .tp-cup {
  width: 0.86em;
  height: 0.86em;
  margin-top: 0.19em;
  flex: none;
}
.tp-cup {
  overflow: visible;
}
.tp-rim {
  fill: none;
  stroke: var(--tp-rim, currentColor);
  stroke-width: 14;
}
.tp-coffee {
  fill: var(--tp-coffee, #4a2c1d);
}
/* Used by the latte-art cups on the website. */
.tp-crema {
  fill: var(--tp-crema, #9a5a28);
}
.tp-check {
  fill: none;
  stroke: var(--tp-check, #d7a86e);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tp-ripple {
  fill: none;
  stroke: var(--tp-check, #d7a86e);
  stroke-width: 2;
  opacity: 0;
}
.tp-cube {
  fill: var(--tp-check, #d7a86e);
  opacity: 0;
}
.tp-coffee,
.tp-ripple,
.tp-cube {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .tp-play .tp-coffee {
    animation: tp-pour 0.42s calc(var(--tp-delay, 0s) + 0.02s) cubic-bezier(0.3, 0.7, 0.2, 1) both;
  }
  .tp-play .tp-cube {
    animation: tp-drop 0.9s calc(var(--tp-delay, 0s) + 0.16s) linear both;
  }
  .tp-play .tp-ripple {
    animation: tp-ripple 0.75s calc(var(--tp-delay, 0s) + 0.52s) cubic-bezier(0.2, 0.6, 0.35, 1)
      both;
  }
  .tp-play .tp-ripple-b {
    animation: tp-ripple 0.75s calc(var(--tp-delay, 0s) + 0.68s) cubic-bezier(0.2, 0.6, 0.35, 1)
      both;
  }
  .tp-play .tp-check {
    stroke-dasharray: 100 110;
    animation: tp-draw 0.42s calc(var(--tp-delay, 0s) + 1s) ease-out both;
  }
}

@keyframes tp-pour {
  0% {
    transform: scale(0);
  }
  70% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes tp-drop {
  0% {
    opacity: 0;
    transform: rotate(-38deg) scale(2.6);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  10% {
    opacity: 1;
  }
  40% {
    transform: rotate(6deg) scale(1);
    animation-timing-function: ease-out;
  }
  50% {
    transform: rotate(9deg) scale(1.08);
    animation-timing-function: ease-in-out;
  }
  62% {
    opacity: 1;
    transform: rotate(8deg) scale(0.98);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6);
  }
  100% {
    opacity: 0;
    transform: rotate(10deg) scale(0.5);
  }
}
@keyframes tp-ripple {
  0% {
    opacity: 0;
    transform: scale(0.34);
    stroke-width: 7;
  }
  5% {
    opacity: 1;
  }
  45% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: scale(1);
    stroke-width: 2;
  }
}
@keyframes tp-draw {
  0% {
    stroke-dashoffset: 101;
  }
  100% {
    stroke-dashoffset: 0;
  }
}