/* TariffTrust public site: header, footer, landing and the public pages, sign-in pages included,
   then the responsive rules of every page. Loaded on every page after app.css, whose tokens and
   components it uses. Strict CSP: no inline styles. */

/* ---------- Public site ---------- */

.container {
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 28px;
}

.menu-toggle {
  display: none;
  min-height: 36px;
  padding: 6px 8px;
}

.site-main {
  min-height: calc(100vh - 66px);
}

.site-main.page {
  padding: 48px 0 80px;
}

.section {
  padding: 96px 0;
}

.section + .section {
  border-top: 1px solid var(--line);
}

.section-title {
  max-width: 720px;
  margin-bottom: 44px;
}

.section-title h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin-bottom: 14px;
}

.section-title p {
  font-size: 17px;
  margin: 0;
}

/* Calls to action and the live marker */

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgb(16 185 129 / 18%);
  flex: none;
}

.live-dot.stale {
  background: #d99a1c;
  box-shadow: 0 0 0 3px rgb(217 154 28 / 18%);
}

/* Duty layers listed in a result */

.layers {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: layer;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.layers li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 4px 16px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  counter-increment: layer;
}

.layers li::before {
  content: counter(layer, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--faint);
}

.layers li:last-child {
  border-bottom: 0;
  background: #fafbfd;
}

.layers li.total::before {
  content: '=';
  font-size: 16px;
  color: var(--ink);
}

.layers h3 {
  margin: 0;
  font-size: 15px;
}

.layers p {
  grid-column: 2;
  margin: 0;
  font-size: 13px;
}

/* Check lists (plans, sign-in) */

.checks {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.checks li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  color: var(--ink-2);
}

.checks li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 5px;
  width: 11px;
  height: 6px;
  border-left: 1.8px solid var(--brand);
  border-bottom: 1.8px solid var(--brand);
  transform: rotate(-45deg);
}

/* A plan that builds on another says so first: "Everything in Essentials, plus:", without a tick. */
.checks li.plan-includes {
  padding-left: 0;
  font-weight: 600;
  color: var(--ink);
}

.checks li.plan-includes::before {
  display: none;
}

.checks.no li::before {
  width: 12px;
  height: 1.8px;
  border: 0;
  background: var(--faint);
  transform: none;
  top: 10px;
}

/* JSON syntax colours */

.tok-k {
  color: var(--brand-on-dark);
}

.tok-s {
  color: #f2b48f;
}

.tok-n {
  color: #a8c7f0;
}

.tok-c {
  color: var(--night-muted);
}

/* Pricing */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

.plan.featured {
  border-color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.plan-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.plan-name h3 {
  margin: 0;
  font-size: 18px;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 12px 0 4px;
}

.plan-price strong {
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.plan-price span {
  color: var(--muted);
  font-size: 14px;
}

.plan-sub {
  min-height: 1.5em;
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 16px;
}

/* What a plan includes comes last, under its button. */
.plan .checks {
  margin: 0;
}

.plan .checks li {
  font-size: 14px;
}

/* The button right under the price, its note under it, then what the plan includes. */
.plan-cta {
  margin: 0 0 24px;
}

.plan-cta .button,
.plan-cta button {
  width: 100%;
}

.plan-cta small {
  display: block;
  text-align: center;
  margin-top: 10px;
}

.plan-variant {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.plans[data-billing='month'] .has-both .plan-variant[data-interval='year'],
.plans[data-billing='year'] .has-both .plan-variant[data-interval='month'] {
  display: none;
}

.plan-audience {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 4px;
}

.billing-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.billing-toggle button {
  --btn-bg: transparent;
  --btn-line: transparent;
  box-shadow: none;
  min-height: 36px;
  color: var(--muted);
}

.billing-toggle button.is-active {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  color: #fff;
}

.billing-toggle .pill {
  padding: 3px 7px;
  font-size: 11px;
}

/* ---------- Auth ---------- */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

.auth-aside {
  position: relative;
  overflow: hidden;
  /* The landing's aurora, still. */
  background:
    radial-gradient(55% 45% at 15% 20%, rgb(91 92 240 / 38%), transparent 70%),
    radial-gradient(45% 40% at 90% 75%, rgb(239 91 58 / 18%), transparent 70%),
    radial-gradient(50% 45% at 40% 100%, rgb(168 85 247 / 24%), transparent 70%),
    var(--night);
  color: var(--night-text);
  padding: 36px 48px;
  display: flex;
  flex-direction: column;
}

.auth-aside::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 4%) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 4%) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

.auth-aside > * {
  position: relative;
}

.auth-pitch {
  margin: auto 0;
  max-width: 460px;
  padding: 48px 0;
}

.auth-pitch h2 {
  color: #fff;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin-bottom: 16px;
}

.auth-pitch p {
  color: var(--night-muted);
  font-size: 16px;
}

.auth-pitch .checks li {
  color: var(--night-text);
}

.auth-pitch .checks li::before {
  border-color: #34d399;
}

.mini-stack {
  display: grid;
  gap: 7px;
  margin: 30px 0;
  max-width: 380px;
}

.mini-stack div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--night-text);
  padding: 9px 12px;
  border-radius: 7px;
  background: var(--night-2);
  border: 1px solid var(--night-line);
  border-left: 3px solid var(--sw);
}

.auth-aside footer {
  font-size: 12.5px;
  color: var(--night-muted);
}

.auth-main {
  display: flex;
  flex-direction: column;
  padding: 28px 48px;
  background: var(--surface);
}

.auth-top {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  font-size: 14px;
  color: var(--muted);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: 40px 0;
}

.auth-card h1 {
  font-size: 30px;
  margin-bottom: 8px;
}

.auth-card > p {
  font-size: 15px;
  margin-bottom: 26px;
}

.auth-card form {
  margin-bottom: 22px;
}

.auth-card form button[type='submit'],
.auth-card form > button {
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
}

.auth-alt {
  font-size: 14px;
  color: var(--muted);
}

/* A link of a sign-up page that is a form: back to another workspace (registration/plan.html). */
.auth-alt form {
  display: inline;
}

.auth-card .auth-alt form > button {
  width: auto;
  min-height: 0;
  margin: 0;
  text-decoration: underline;
}

.auth-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 26px;
  list-style: none;
  padding: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.auth-steps li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.auth-steps li + li::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--line-2);
}

.auth-steps b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  font-size: 11px;
  font-weight: 550;
}

.auth-steps .done b {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.auth-steps .current {
  color: var(--ink);
  font-weight: 550;
}

.auth-steps .current b {
  border-color: var(--ink);
}

/* Home: the preview of a feature a visitor opens from a use-case card (web/_feature_previews.html),
   the welcome's dialog made wider: an illustration on the dark of the brand, then what it does and
   how to start. */
.feature-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
}

.feature-art {
  padding: 40px 32px 30px;
  background:
    radial-gradient(60% 80% at 20% 10%, rgb(123 124 246 / 60%), transparent 70%),
    radial-gradient(50% 70% at 85% 30%, rgb(239 91 58 / 35%), transparent 70%),
    radial-gradient(60% 80% at 60% 110%, rgb(168 85 247 / 45%), transparent 70%),
    var(--night);
}

.feature-window {
  border-radius: 16px;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 14%);
  color: #fff;
  overflow: hidden;
  animation: welcome-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.feature-window-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  font-size: 12.5px;
  color: rgb(255 255 255 / 75%);
}

.fx-rows {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.fx-row {
  display: grid;
  grid-template-columns: 112px 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.fx-label {
  color: rgb(255 255 255 / 85%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fx-bar {
  display: flex;
  gap: 2px;
  height: 12px;
}

.fx-bar i {
  border-radius: 3px;
}

.fx-bar .g1 {
  flex: 1;
}

.fx-bar .g2 {
  flex: 2;
}

.fx-bar .g3 {
  flex: 3;
}

.fx-bar .g4 {
  flex: 4;
}

.fx-row .fx-bar::after {
  content: '';
  flex: 6;
}

.fx-best,
.fx-chip {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgb(255 255 255 / 12%);
  color: #fff;
  white-space: nowrap;
}

.fx-best {
  background: var(--verified);
}

.fx-ok {
  color: #7ee2a8;
  display: inline-flex;
}

.fx-note {
  font-style: normal;
  font-size: 11.5px;
  color: rgb(255 255 255 / 65%);
}

.fx-entry {
  padding-top: 10px;
  border-top: 1px dashed rgb(255 255 255 / 18%);
}

.fx-row:has(.fx-chip) {
  grid-template-columns: 1fr auto;
}

.fx-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  color: rgb(255 255 255 / 75%);
}

.fx-chip.is-changed {
  background: var(--signal);
  color: #fff;
  font-weight: 600;
}

.fx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 0 16px 14px;
  font-size: 11.5px;
  color: rgb(255 255 255 / 70%);
}

.fx-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fx-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.fx-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 16px 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 12.5px;
  box-shadow: 0 12px 30px -12px rgb(0 0 0 / 50%);
  animation: welcome-rise 0.5s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.fx-alert .icon {
  color: var(--signal);
}

.fx-alert b {
  display: block;
}

.feature-body {
  padding: 24px 32px 28px;
}

.feature-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}

.feature-body h2 {
  font-size: 24px;
  letter-spacing: -0.03em;
  margin: 6px 0 8px;
}

.feature-body > p {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--ink-2);
}

.feature-body .checks {
  margin: 0 0 22px;
}

.feature-body .checks li {
  font-size: 14px;
}

.feature-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.feature-cta .lp-button {
  flex: 1 1 auto;
  justify-content: center;
}

.feature-cta .lp-button.ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink);
}

.feature-cta .lp-button.ghost:hover {
  background: var(--surface-2, rgb(14 20 38 / 4%));
}

.feature-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* Sign-up: the plan chosen with the account (registration/_plan_picker.html). */
.plan-picker {
  border: 0;
  padding: 0;
  margin: 0 0 6px;
  min-width: 0;
}

.plan-picker legend {
  padding: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}

.plan-picker .billing-toggle {
  margin-bottom: 12px;
  border-radius: 999px;
}

.plan-picker .billing-toggle button {
  border-radius: 999px;
  min-height: 32px;
  padding: 6px 14px;
  font-size: 13px;
}

.plan-picker .billing-toggle button.is-active {
  --btn-bg: var(--brand);
}

.plan-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.plan-choices[data-billing='month'] .has-both [data-interval='year'],
.plan-choices[data-billing='year'] .has-both [data-interval='month'] {
  display: none;
}

.plan-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.plan-choice:hover {
  border-color: var(--line-2);
}

.plan-choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.plan-choice:has(input:checked) {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgb(91 92 240 / 16%);
}

.plan-choice:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.plan-choice-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
}

/* A radio the card draws: the plan chosen is filled, whatever "Popular" says of another. */
.plan-choice-name::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
  background: var(--surface);
}

.plan-choice:has(input:checked) .plan-choice-name::before {
  border: 5px solid var(--brand);
}

.plan-choice-name .pill {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 8px;
}

.plan-choice-price {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.plan-choice-price small {
  display: inline;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  margin-left: 4px;
}

.plan-choice-sub {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

.plan-picker-compare {
  margin: 8px 0 0;
  font-size: 13px;
}

.plan-picker-next {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}

/* Billing: the offers as the pricing page shows them, inside the workspace's card. */
.card.billing-plans.pricing-page {
  padding-top: 24px;
}

.billing-plans.pricing-page .billing-toggle {
  margin-bottom: 24px;
}

.billing-plans > p.muted {
  margin: 20px 0 0;
}

.billing-plans .plan-cta .is-current {
  pointer-events: none;
  opacity: 0.7;
}

.billing-plans .plan-cta form {
  margin: 0;
}

.confirm-card {
  max-width: 560px;
  margin: 56px auto;
  padding: 34px 36px;
}

.confirm-card h1 {
  font-size: 26px;
}

.confirm-card form {
  margin-top: 22px;
}

/* ---------- Site shell: header and footer ---------- */

.lp-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.sh {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(247 248 251 / 82%);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s;
}

.sh-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.sh .brand {
  margin-right: 8px;
}

.sh-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.sh-links a,
.sh-signin {
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
}

.sh-links a:hover,
.sh-signin:hover,
.sh-links a[aria-current='page'] {
  background: rgb(14 20 38 / 6%);
  color: var(--ink);
}

.sh-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* A group of the menu (Resources): its button, then its panel under it, open while the button says
   so (app.js). */
.sh-group {
  position: relative;
}

.sh-group-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px 8px 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  box-shadow: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
}

.sh-group-button:hover,
.sh-group-button.is-current,
.sh-group-button[aria-expanded='true'] {
  background: rgb(14 20 38 / 6%);
  color: var(--ink);
}

.sh-group-button .icon {
  transition: transform 0.15s;
}

.sh-group-button[aria-expanded='true'] .icon {
  transform: rotate(180deg);
}

.sh-group-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: -8px;
  z-index: 40;
  width: 300px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.sh-group-button[aria-expanded='true'] + .sh-group-panel {
  display: grid;
}

.sh-links .sh-group-panel a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--ink);
}

.sh-group-panel b {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.sh-group-panel small {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
}

/* The administration, for the staff, as in the workspace's top bar (.top-admin, app.css). */
.sh.on-dark:not(.is-scrolled):not(.menu-open) .top-admin {
  --btn-bg: rgb(255 255 255 / 6%);
  --btn-fg: #fff;
  --btn-line: rgb(255 255 255 / 22%);
}

/* Signing in, and the administration for the staff, in the menu of a phone too narrow for them
   beside the offer; there, the workspace's button says "Workspace". */
.sh-menu-signin,
.sh-short {
  display: none;
}

.sh-toggle {
  display: none;
  --btn-bg: transparent;
  --btn-line: transparent;
  box-shadow: none;
  padding: 8px;
}

/* A tap leaves its hover on a phone: the button keeps the header's own background, never the
   light one of a button, which stayed a white square over the landing's dark hero. */
.sh-toggle:hover {
  --btn-bg: rgb(14 20 38 / 6%);
}

/* Over the dark hero of the landing, until the page scrolls. */
.sh.on-dark:not(.is-scrolled):not(.menu-open) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

.sh.on-dark:not(.is-scrolled):not(.menu-open) .brand,
.sh.on-dark:not(.is-scrolled):not(.menu-open) .brand .brand-name span,
.sh.on-dark:not(.is-scrolled):not(.menu-open) .sh-links > a,
.sh.on-dark:not(.is-scrolled):not(.menu-open) .sh-group-button,
.sh.on-dark:not(.is-scrolled):not(.menu-open) .sh-signin,
.sh.on-dark:not(.is-scrolled):not(.menu-open) .sh-toggle {
  color: #fff;
}

.sh.on-dark:not(.is-scrolled):not(.menu-open) .brand-mark .m-base {
  fill: #fff;
}

.sh.on-dark:not(.is-scrolled):not(.menu-open) .brand-mark .m-mid {
  fill: var(--brand-on-dark);
}

.sh.on-dark:not(.is-scrolled):not(.menu-open) .sh-links > a:hover,
.sh.on-dark:not(.is-scrolled):not(.menu-open) .sh-group-button:hover,
.sh.on-dark:not(.is-scrolled):not(.menu-open) .sh-group-button[aria-expanded='true'],
.sh.on-dark:not(.is-scrolled):not(.menu-open) .sh-signin:hover {
  background: rgb(255 255 255 / 10%);
}

.sh.on-dark:not(.is-scrolled):not(.menu-open) .sh-toggle:hover {
  --btn-bg: rgb(255 255 255 / 10%);
}

/* The landing's hero starts under the transparent header. */
body[data-page='home'] .site-main {
  margin-top: -68px;
}

.sf {
  background: var(--night);
  color: var(--night-text);
  padding: 72px 0 36px;
}

.sf-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr) 1.6fr;
  gap: 36px;
}

.sf .brand,
.sf .brand .brand-name span {
  color: #fff;
}

.sf .brand-mark .m-base {
  fill: #fff;
}

.sf .brand-mark .m-mid {
  fill: var(--brand-on-dark);
}

.sf p {
  color: var(--night-muted);
  font-size: 14px;
  margin: 14px 0 10px;
}

.sf a {
  color: var(--night-text);
  text-decoration: none;
  font-size: 14px;
}

.sf a:hover {
  color: #fff;
}

/* TariffTrust's profile elsewhere, beside its email (web/_site_footer.html). */
.sf .sf-social {
  display: inline-flex;
  margin-left: 12px;
  vertical-align: -4px;
}

/* When the official sources were last read, under the brand (web/_site_footer.html). */
.sf .sf-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
}

.sf h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 4px 0 14px;
}

.sf ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.sf-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sf-form input {
  flex: 1;
  min-width: 0;
  background: rgb(255 255 255 / 6%);
  border-color: var(--night-line);
  color: #fff;
}

.sf-form input::placeholder {
  color: var(--night-muted);
}

.sf-base {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--night-line);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 12.5px;
  color: var(--night-muted);
}

.sf-base p {
  max-width: 760px;
  margin: 0;
  font-size: 12.5px;
}

.sf-base p + p {
  margin-top: 8px;
}

.sf-legal {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-end;
  gap: 6px 16px;
}

.sf-legal a {
  color: var(--night-muted);
}

.sf-legal a:hover {
  color: #fff;
}

.sf-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--night-muted);
}

.sf-note a {
  color: inherit;
  text-decoration: underline;
}

/* The footer's subscription, sent or refused, on the night background (web/_newsletter.html). */
.sf-news .nl-sent {
  border-color: var(--night-line);
  background: rgb(255 255 255 / 6%);
  color: #fff;
}

.sf-news .nl-sent .icon {
  color: var(--brand-on-dark);
}

.sf-news .nl-sent p {
  color: var(--night-text);
}

.sf-news .nl-error {
  margin-top: 0;
  color: #ff9f9f;
}

/* ---------- Landing ---------- */

.lp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.2s,
    background 0.2s;
}

.lp-button.sm {
  min-height: 38px;
  padding: 8px 16px;
  font-size: 14px;
}

.lp-button.primary {
  background: linear-gradient(135deg, #6d6ef7, var(--brand) 55%, #4a4be0);
  color: #fff;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 25%) inset,
    0 8px 24px -8px var(--brand-glow);
}

.lp-button.primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 25%) inset,
    0 14px 32px -10px rgb(91 92 240 / 55%);
  text-decoration: none;
}

.lp-button.ghost {
  background: rgb(255 255 255 / 6%);
  border-color: rgb(255 255 255 / 22%);
  color: #fff;
}

.lp-button.ghost:hover {
  background: rgb(255 255 255 / 12%);
  text-decoration: none;
}

.lp-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
  color: #fff;
  padding-top: 148px;
}

.lp-aurora {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.lp-aurora i {
  position: absolute;
  width: 46vw;
  height: 46vw;
  min-width: 420px;
  min-height: 420px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  animation: lp-drift 22s ease-in-out infinite alternate;
}

.lp-aurora i:nth-child(1) {
  top: -18%;
  left: -8%;
  background: radial-gradient(circle, var(--brand), transparent 65%);
}

.lp-aurora i:nth-child(2) {
  top: 8%;
  right: -12%;
  background: radial-gradient(circle, var(--brand-on-dark), transparent 62%);
  opacity: 0.38;
  animation-duration: 26s;
  animation-delay: -6s;
}

.lp-aurora i:nth-child(3) {
  bottom: -30%;
  left: 30%;
  background: radial-gradient(circle, var(--signal), transparent 62%);
  opacity: 0.28;
  animation-duration: 30s;
  animation-delay: -12s;
}

.lp-aurora.soft i {
  opacity: 0.22;
}

@keyframes lp-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(6%, 8%, 0) scale(1.15);
  }
}

.lp-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 5%) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 5%) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
}

.lp-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 56px;
}

/* On a computer the hero fills the screen. Tall enough for all of it (about 910 px), the
   figures and the ticker sit at the foot of the screen; shorter, the copy and the card fill
   the screen and the figures start below it, never cut by its edge. */
@media (min-width: 1081px) {
  .lp-hero {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
  }

  .lp-hero-inner {
    flex: 1 0 auto;
  }
}

@media (min-width: 1081px) and (max-height: 919px) {
  .lp-hero-inner {
    min-height: calc(100vh - 148px);
    min-height: calc(100svh - 148px);
  }
}

.lp-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgb(52 211 153 / 60%);
  animation: lp-pulse 2.4s infinite;
}

.lp-live-dot.stale {
  background: #fbbf24;
}

@keyframes lp-pulse {
  70% {
    box-shadow: 0 0 0 8px rgb(52 211 153 / 0%);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(52 211 153 / 0%);
  }
}

.lp-hero h1 {
  color: #fff;
  font-size: clamp(2.7rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 650;
  margin: 0 0 24px;
}

.lp-gradient {
  background: var(--brand-gradient-on-dark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-lead {
  color: var(--night-text);
  font-size: clamp(1.06rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 0 34px;
}

.lp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lp-cta.center {
  justify-content: center;
}

.lp-fine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 22px 0 0;
  color: var(--night-muted);
  font-size: 13.5px;
}

/* Each promise whole, its tick with it, on one line. */
.lp-fine > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.lp-fine .icon {
  color: #34d399;
}

/* The check, drawn as a small application window. */
.lp-engine {
  position: relative;
  margin: 0;
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 4%));
  border: 1px solid rgb(255 255 255 / 14%);
  box-shadow:
    0 40px 120px -40px rgb(91 92 240 / 55%),
    0 0 0 1px rgb(255 255 255 / 3%) inset;
  backdrop-filter: blur(18px);
}

.lp-engine-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 4px 12px;
  color: var(--night-muted);
  font-size: 12.5px;
  font-weight: 500;
}

.lp-dots {
  display: inline-flex;
  gap: 6px;
}

.lp-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(255 255 255 / 18%);
}

.lp-engine-pill {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgb(52 211 153 / 14%);
  color: #6ee7b7;
  font-size: 11.5px;
}

.lp-product {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.lp-field {
  padding: 8px 12px;
  border-radius: 12px;
  background: rgb(7 11 26 / 55%);
  border: 1px solid rgb(255 255 255 / 8%);
}

.lp-field span {
  display: block;
  color: var(--night-muted);
  font-size: 11px;
  margin-bottom: 2px;
}

.lp-field b {
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
}

.lp-sources {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.lp-source {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgb(255 255 255 / 5%);
  border: 1px solid rgb(255 255 255 / 9%);
  animation: lp-source 9s infinite both;
}

.lp-source-text {
  display: grid;
  min-width: 0;
}

.lp-source b {
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
}

.lp-source small {
  margin: 0;
  color: var(--night-muted);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-mark {
  width: 6px;
  align-self: stretch;
  border-radius: 6px;
}

.lp-tick {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  animation: lp-tick 9s infinite both;
}

.lp-tick .icon {
  stroke-width: 2.4;
  width: 13px;
  height: 13px;
}

.lp-source.s2,
.lp-source.s2 .lp-tick {
  animation-delay: 0.5s;
}

.lp-source.s3,
.lp-source.s3 .lp-tick {
  animation-delay: 1s;
}

.lp-source.s4,
.lp-source.s4 .lp-tick {
  animation-delay: 1.5s;
}

.lp-source.s5,
.lp-source.s5 .lp-tick {
  animation-delay: 2s;
}

.lp-source.s6,
.lp-source.s6 .lp-tick {
  animation-delay: 2.5s;
}

@keyframes lp-source {
  0%,
  6% {
    border-color: rgb(255 255 255 / 9%);
    background: rgb(255 255 255 / 3%);
  }

  12%,
  88% {
    border-color: rgb(142 143 247 / 35%);
    background: rgb(255 255 255 / 7%);
  }

  100% {
    border-color: rgb(255 255 255 / 9%);
    background: rgb(255 255 255 / 3%);
  }
}

@keyframes lp-tick {
  0%,
  8% {
    opacity: 0;
    transform: scale(0.4);
  }

  14%,
  90% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}

.lp-answer {
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
}

.lp-answer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 12px;
}

.lp-sourced {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--verified-tint);
  color: var(--verified);
  font-size: 12px;
  font-weight: 600;
}

.lp-stack {
  display: flex;
  gap: 4px;
  height: 14px;
}

.lp-stack i {
  border-radius: 6px;
  transform-origin: left center;
  animation: lp-grow 9s infinite both;
}

.lp-stack i:nth-child(1) {
  flex: 5;
  animation-delay: 3.1s;
}

.lp-stack i:nth-child(2) {
  flex: 3;
  animation-delay: 3.35s;
}

.lp-stack i:nth-child(3) {
  flex: 1.6;
  animation-delay: 3.6s;
}

.lp-stack i:nth-child(4) {
  flex: 1.2;
  animation-delay: 3.85s;
}

.lp-stack i:nth-child(5) {
  flex: 0.7;
  animation-delay: 4.1s;
}

@keyframes lp-grow {
  0%,
  4% {
    transform: scaleX(0);
    opacity: 0;
  }

  12%,
  86% {
    transform: scaleX(1);
    opacity: 1;
  }

  96%,
  100% {
    transform: scaleX(0);
    opacity: 0;
  }
}

.lp-caption {
  margin-top: 10px;
  color: var(--night-muted);
  font-size: 12px;
  text-align: center;
}

/* The live check (_hero_check.html): the worked example, each section with what it adds or
   "Not applied", lit once in turn, then the total; it stays as it ends. */
.lp-goods {
  margin: -2px 2px 10px;
  color: var(--night-text);
  font-size: 12.5px;
}

.lp-engine.is-live .lp-source {
  animation-name: lp-light;
  animation-duration: 1.4s;
  animation-iteration-count: 1;
}

.lp-source.is-off {
  background: rgb(255 255 255 / 2%);
}

.lp-source.is-off .lp-mark {
  opacity: 0.35;
}

.lp-source.is-off b {
  color: var(--night-text);
}

.lp-source-amount,
.lp-source-none {
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  animation: lp-appear 0.45s ease both;
}

.lp-source-amount {
  color: #fff;
  font-size: 14px;
  font-weight: 650;
}

.lp-source-none {
  color: var(--night-muted);
  font-size: 11.5px;
}

.lp-source.s1 .lp-source-amount,
.lp-source.s1 .lp-source-none {
  animation-delay: 0.3s;
}

.lp-source.s2 .lp-source-amount,
.lp-source.s2 .lp-source-none {
  animation-delay: 0.8s;
}

.lp-source.s3 .lp-source-amount,
.lp-source.s3 .lp-source-none {
  animation-delay: 1.3s;
}

.lp-source.s4 .lp-source-amount,
.lp-source.s4 .lp-source-none {
  animation-delay: 1.8s;
}

.lp-source.s5 .lp-source-amount,
.lp-source.s5 .lp-source-none {
  animation-delay: 2.3s;
}

.lp-source.s6 .lp-source-amount,
.lp-source.s6 .lp-source-none {
  animation-delay: 2.8s;
}

.lp-answer-total {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  animation: lp-appear 0.5s 3.3s ease both;
}

/* The total's layers, each as wide as its share (app.js sets --fill from data-fill). */
.lp-stack.is-real {
  gap: 0;
  border-radius: 7px;
  overflow: hidden;
  background: var(--sunken);
}

.lp-stack.is-real i {
  flex: 0 0 calc(var(--fill, 0) * 100%);
  min-width: 3px;
  border-radius: 0;
  animation: lp-grow-once 0.8s 3.1s ease both;
}

.lp-answer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}

.lp-engine.is-live .lp-caption a {
  color: #c7c8ff;
  font-weight: 600;
}

@keyframes lp-light {
  0% {
    border-color: rgb(255 255 255 / 9%);
  }

  35% {
    border-color: rgb(142 143 247 / 60%);
  }

  100% {
    border-color: rgb(255 255 255 / 9%);
  }
}

@keyframes lp-appear {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lp-grow-once {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* The latest publication of each official source, a ticker tape along the foot of the hero
   (web/home.html): each cell the agency in capitals, the day, then the document. */
.lp-band {
  margin-top: 72px;
  border-top: 1px solid rgb(255 255 255 / 10%);
  background: rgb(255 255 255 / 3%);
}

.lp-band-track {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.lp-band-track ul {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: lp-band 150s linear infinite;
}

.lp-band:hover ul {
  animation-play-state: paused;
}

.lp-band-track li {
  border-right: 1px solid rgb(255 255 255 / 8%);
}

.lp-band-track a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 24px;
  color: var(--night-muted);
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
}

.lp-band-track a:hover {
  color: #fff;
  text-decoration: none;
}

.lp-band-track b,
.lp-band-track time {
  font-family: var(--font-mono);
  font-size: 12px;
}

.lp-band-track b {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-band-track time {
  color: var(--night-text);
  font-variant-numeric: tabular-nums;
}

/* The countries an action names: before its title, and brighter. */
.lp-band-track em {
  color: #fff;
  font-style: normal;
  font-weight: 500;
}

/* A long title ends in an ellipsis; the link's title gives it whole. */
.lp-band-track span {
  max-width: 52ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes lp-band {
  to {
    transform: translateX(-100%);
  }
}

@media (max-width: 640px) {
  .lp-band {
    margin-top: 56px;
  }

  .lp-band-track a {
    padding: 7px 18px;
  }

  .lp-band-track span {
    max-width: 30ch;
  }

  .lp-band-track ul {
    animation-duration: 110s;
  }
}

/* Still, for a reader who asks for less motion: the cells wrap, centred, once. */
@media (prefers-reduced-motion: reduce) {
  .lp-band-track {
    mask-image: none;
  }

  .lp-band-track ul {
    flex: auto;
    flex-wrap: wrap;
    justify-content: center;
    animation: none;
  }

  .lp-band-track ul[aria-hidden] {
    display: none;
  }
}

/* Duty layer colors, shared by the landing's drawings. */
.lp-hero .l-base,
.lp-section .l-base,
.feature-art .l-base {
  background: var(--layer-base);
}

.lp-hero .l-301,
.lp-section .l-301,
.feature-art .l-301 {
  background: var(--layer-301);
}

.lp-hero .l-232,
.lp-section .l-232,
.feature-art .l-232 {
  background: var(--layer-232);
}

.lp-hero .l-201,
.lp-section .l-201,
.feature-art .l-201 {
  background: var(--layer-201);
}

.lp-hero .l-338,
.lp-section .l-338,
.feature-art .l-338 {
  background: var(--layer-338);
}

.lp-hero .l-other,
.lp-section .l-other,
.feature-art .l-other {
  background: var(--layer-other);
}

.lp-hero .l-fee,
.lp-section .l-fee,
.feature-art .l-fee {
  background: var(--layer-fee);
}

.lp-proof {
  margin: 72px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgb(255 255 255 / 10%);
}

.lp-proof div {
  padding: 26px 24px 0 0;
}

.lp-proof dt {
  color: var(--night-muted);
  font-size: 13px;
  order: 2;
}

.lp-proof dd {
  margin: 0 0 4px;
  color: #fff;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.lp-proof div {
  display: flex;
  flex-direction: column-reverse;
}

/* The developers' section of the landing: what the API offers, and one request with its answer. */
.lp-points {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.lp-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
}

.lp-points .icon {
  color: var(--verified);
}

.lp-api-plans {
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
}

.lp-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.lp-code {
  margin: 0;
  min-width: 0;
  border: 1px solid var(--night-line);
  border-radius: var(--radius-lg);
  background: var(--night);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.lp-code figcaption {
  padding: 14px 20px 0;
  color: var(--night-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lp-code pre + figcaption {
  border-top: 1px solid var(--night-line);
}

/* A line of code keeps its length: the block scrolls sideways on a phone. */
.lp-code pre {
  margin: 0;
  padding: 10px 20px 18px;
  border: 0;
  border-radius: 0;
  background: none;
  white-space: pre;
  overflow-x: auto;
  color: var(--night-text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
}

.lp-section {
  position: relative;
  padding: 112px 0;
  background: var(--surface);
}

.lp-tint {
  background: var(--paper);
}

.lp-night {
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
  color: var(--night-text);
}

.lp-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-night .lp-eyebrow {
  color: var(--brand-on-dark);
}

.lp-section h2,
.lp-final h2 {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 650;
  margin: 0 0 18px;
}

.lp-night h2,
.lp-night h3 {
  color: #fff;
}

.lp-section p {
  font-size: 17px;
  line-height: 1.65;
}

.lp-night p {
  color: var(--night-text);
}

.lp-heading {
  max-width: 720px;
  margin-bottom: 52px;
}

.lp-heading.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.lp-title {
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: 650;
  margin: 0 0 18px;
}

/* Pricing page: the plan cards in the new look. */
.pricing-page .billing-toggle {
  display: flex;
  width: max-content;
  margin: 0 auto 32px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.pricing-page .billing-toggle button {
  border-radius: 999px;
  padding: 8px 18px;
}

.pricing-page .billing-toggle button.is-active {
  --btn-bg: var(--brand);
}

.pricing-page .plans {
  gap: 22px;
}

.pricing-page .plan {
  border-radius: 24px;
  padding: 32px;
  border-color: rgb(14 20 38 / 7%);
  box-shadow: var(--shadow);
}

.pricing-page .plan.featured {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--brand), var(--signal)) border-box;
  box-shadow: 0 30px 70px -30px rgb(91 92 240 / 40%);
}


/* Whom a plan is for: a sentence, read as one, not a label in capitals. */
.pricing-page .plan-audience {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
}

.pricing-page .plan-price strong {
  font-weight: 650;
  font-size: 48px;
}

.pricing-page .plan-cta .button {
  border-radius: 999px;
}

.pricing-page .plan p.plan-sub {
  font-size: 13.5px;
  line-height: 1.5;
}

/* Free first, then the plans: four cards side by side where they fit, two by two below, one
   above the other on a phone. */
.pricing-page .plans.has-free {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.pricing-page .plans.has-free .plan {
  padding: 28px 24px;
}

.pricing-page .plans.has-free .plan-price strong {
  font-size: 42px;
}


/* Four side by side: whom each is for on two lines and its note on three at most, so that the
   prices, the buttons and the lists line up across the cards. */
@media (min-width: 1181px) {
  .pricing-page .plans.has-free .plan-audience {
    min-height: 2.8em;
  }

  .pricing-page .plans.has-free .plan-cta small {
    min-height: 4.4em;
  }
}

@media (max-width: 1180px) {
  .pricing-page .plans.has-free {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .pricing-page .plans.has-free {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The landing's plans: the cards of the pricing page, in its section. */
.pricing-page.plans-embed {
  padding-top: 0;
}

.pricing-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 40px;
}

.lp-note {
  padding: 28px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid rgb(14 20 38 / 6%);
}

.lp-note h3 {
  font-size: 18px;
}

@media (max-width: 860px) {
  .pricing-notes {
    grid-template-columns: 1fr;
  }
}

.lp-narrow {
  max-width: 820px;
}

.lp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.lp-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

.lp-link .icon {
  transition: transform 0.15s;
}

.lp-link:hover .icon {
  transform: translateX(3px);
}

.lp-link.light {
  color: var(--brand-on-dark);
  margin-top: 40px;
}

.lp-tower {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  /* Its own width, not the window's, decides whether a layer's line fits beside its name. */
  container: tower / inline-size;
}

.lp-tower li {
  display: grid;
  grid-template-columns: 136px 1fr;
  align-items: center;
  gap: 18px;
  padding: 15px 22px;
  border-radius: 16px;
  color: #fff;
  box-shadow: var(--shadow);
}

.lp-tower li span {
  color: rgb(255 255 255 / 86%);
  font-size: 14.5px;
}

.lp-tower b {
  font-size: 16px;
  font-weight: 650;
}

.lp-tower li.l-201,
.lp-tower li.l-201 span {
  color: #3d2a00;
}

.lp-tower li.l-338,
.lp-tower li.l-338 span {
  color: #042f2e;
}

/* White text on the orange of Section 301 and the grey of the fees falls under the contrast AA
   asks for (3.4:1 and 2.6:1): dark text instead, 5.4:1 and 7.1:1. */
.lp-tower li.l-301,
.lp-tower li.l-fee {
  color: var(--ink);
}

.lp-tower li.l-301 span,
.lp-tower li.l-fee span {
  color: inherit;
}

.lp-tower li:nth-child(1) {
  margin: 0 15% 0 0;
}

.lp-tower li:nth-child(2) {
  margin: 0 12% 0 0;
}

.lp-tower li:nth-child(3) {
  margin: 0 9% 0 0;
}

.lp-tower li:nth-child(4) {
  margin: 0 6% 0 0;
}

.lp-tower li:nth-child(5) {
  margin: 0 3% 0 0;
}

/* Too narrow for each layer's line beside its name: the line goes under it, in every layer alike. */
@container tower (max-width: 529px) {
  .lp-tower li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.lp-cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.lp-case {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    border-color 0.2s;
}

.lp-case {
  position: relative;
}

/* Free, or with a plan: in the corner the icon leaves free. */
.lp-case-plan {
  position: absolute;
  top: 28px;
  right: 28px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.lp-case-plan.is-free {
  background: var(--verified-tint);
  color: var(--verified);
}

.lp-case:hover {
  transform: translateY(-3px);
  border-color: var(--brand-soft);
  box-shadow: 0 24px 48px -24px rgb(91 92 240 / 35%);
  text-decoration: none;
}

.lp-case.wide {
  grid-row: span 2;
  background:
    radial-gradient(120% 80% at 100% 0%, rgb(91 92 240 / 14%), transparent 60%),
    var(--surface);
}

.lp-case-art {
  display: grid;
  gap: 8px;
  margin: 18px 0 6px;
  padding: 16px;
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
}

.lp-mini-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 14px;
  font-weight: 550;
}

.lp-mini-row i {
  width: 10px;
  height: 22px;
  border-radius: 4px;
}

.lp-mini-row em {
  font-style: normal;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--verified-tint);
  color: var(--verified);
  font-size: 11.5px;
  font-weight: 600;
}

.lp-mini-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px 0;
  color: var(--muted);
  font-size: 13px;
}

.lp-mini-total b {
  color: var(--ink);
  white-space: nowrap;
}

.lp-case-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--brand-tint);
  color: var(--brand);
  margin-bottom: 10px;
}

.lp-case-icon .icon {
  width: 22px;
  height: 22px;
}

.lp-case-who {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.lp-case h3 {
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
}

.lp-case.wide h3 {
  font-size: 28px;
}

.lp-case p {
  font-size: 15.5px;
  margin: 0;
}

/* The developers' card, a strip under the others: its icon, its words, its plan and its link. */
.lp-case.banner {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 20px;
  row-gap: 4px;
  align-items: center;
}

.lp-case.banner .lp-case-icon {
  grid-column: 1;
  grid-row: 1 / span 3;
  margin: 0;
}

.lp-case.banner .lp-case-who,
.lp-case.banner h3,
.lp-case.banner p {
  grid-column: 2;
}

.lp-case.banner .lp-case-plan {
  position: static;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.lp-case.banner .lp-case-go {
  grid-column: 3;
  grid-row: 3;
  margin: 0;
  padding: 0;
}

@media (max-width: 760px) {
  .lp-case.banner {
    display: flex;
    align-items: stretch;
  }

  .lp-case.banner .lp-case-icon {
    align-self: flex-start;
    margin-bottom: 10px;
  }


  .lp-case.banner .lp-case-plan {
    position: absolute;
  }

  .lp-case.banner .lp-case-go {
    margin-top: auto;
    padding-top: 14px;
  }
}

.lp-case-go {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  font-weight: 600;
  font-size: 14.5px;
}

.lp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  counter-reset: step;
}

.lp-steps li {
  position: relative;
  padding: 30px 28px 28px;
  border-radius: 22px;
  background: var(--paper);
}

.lp-step-n {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 18px;
  background: var(--ink);
  color: #fff;
  font-weight: 650;
}

.lp-steps h3 {
  font-size: 20px;
  letter-spacing: -0.02em;
}

.lp-steps p {
  font-size: 15.5px;
  margin: 0;
}

.lp-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.lp-pillar {
  padding: 30px;
  border-radius: 22px;
  background: rgb(255 255 255 / 4%);
  border: 1px solid var(--night-line);
}

.lp-pillar > .icon {
  width: 28px;
  height: 28px;
  color: var(--brand-on-dark);
  margin-bottom: 18px;
}

.lp-pillar h3 {
  font-size: 19px;
}

.lp-pillar p {
  font-size: 15px;
  margin: 0;
}


.lp-faq {
  display: grid;
  gap: 12px;
}

.lp-faq details {
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 0 24px;
}

.lp-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 0;
  font-size: 17px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

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

.lp-faq summary::after {
  width: 10px;
  height: 10px;
  border-color: var(--brand);
  border-width: 2px;
}

.lp-faq details p {
  margin: 0 0 22px;
  font-size: 16px;
}

.lp-final {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 120px 0;
  background: var(--night);
  color: #fff;
  text-align: center;
}

.lp-final h2 {
  color: #fff;
  font-size: clamp(2.3rem, 4.6vw, 3.8rem);
}

.lp-final p {
  color: var(--night-text);
  font-size: 18px;
  margin: 0 0 34px;
}

/* Revealed when scrolled into view (landing.js); without the script everything shows. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .lp-aurora i,
  .lp-live-dot,
  .lp-source,
  .lp-tick,
  .lp-stack i {
    animation: none;
  }

  .js-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 1080px) {
  .lp-hero-inner,
  .lp-split {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .lp-engine {
    max-width: 620px;
  }

  .lp-cases {
    grid-template-columns: 1fr 1fr;
  }

  .lp-case.wide {
    grid-row: auto;
    grid-column: span 2;
  }

  .sf-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .sf-brand,
  .sf-news {
    grid-column: span 3;
  }
}

@media (max-width: 860px) {
  .sh-links {
    display: none;
  }

  .sh-toggle {
    display: inline-flex;
  }

  /* Without the links, the buttons and the menu go to the right edge. */
  .sh .brand {
    margin-right: auto;
  }

  /* The phone's menu: the pages and the groups in the order of the wide header, large, one per
     row; then signing in. It scrolls within the screen. */
  .sh.menu-open .sh-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    padding: 8px 16px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }

  .sh.menu-open .sh-links > a {
    order: 0;
    padding: 13px 4px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    color: var(--ink);
    font-size: 17px;
    font-weight: 600;
  }

  .sh.menu-open .sh-links > a:hover,
  .sh.menu-open .sh-links > a[aria-current='page'] {
    background: none;
    color: var(--brand);
  }

  .sh.menu-open .sh-group {
    border-bottom: 1px solid var(--line);
  }

  /* In the phone's menu, a group is a row like the pages: its button opens its links under it and
     closes them, one group open at a time (app.js). */
  .sh-group-button,
  .sh-group-button:hover,
  .sh-group-button.is-current,
  .sh-group-button[aria-expanded='true'] {
    width: 100%;
    justify-content: space-between;
    padding: 13px 4px;
    border-radius: 0;
    background: none;
    color: var(--ink);
    font-size: 17px;
    font-weight: 600;
  }

  .sh-group-button.is-current {
    color: var(--brand);
  }

  .sh-group-panel {
    grid-template-columns: 1fr;
    position: static;
    width: auto;
    padding: 0 0 10px;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .sh-links .sh-group-panel a {
    padding: 10px 12px;
  }

  .sh-group-panel b {
    font-size: 15.5px;
    font-weight: 500;
    color: var(--ink-2);
  }

  .sh-group-panel small {
    display: none;
  }

  .sh-actions .sh-signin {
    padding: 8px 10px;
  }

  .lp-proof {
    grid-template-columns: 1fr 1fr;
  }

  .lp-steps,
  .lp-pillars {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .sh-actions .sh-signin,
  .sh-actions .top-admin,
  .sh-long {
    display: none;
  }

  .sh-short {
    display: inline;
  }

  .sh.menu-open .sh-links > a.sh-menu-signin {
    display: block;
    order: 2;
    margin-top: 16px;
    padding: 12px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    text-align: center;
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  .lp-wrap,
  .sh-inner {
    padding: 0 16px;
  }

  .sh-inner {
    gap: 12px;
  }

  .lp-hero {
    padding-top: 112px;
  }

  .lp-cta .lp-button {
    flex: 1 1 100%;
  }

  .lp-product {
    grid-template-columns: 1fr 1fr;
  }

  .lp-product .lp-field:first-child {
    grid-column: span 2;
  }

  /* The hero's card, one section a row; those not applied share a row, three small tiles with
     their name only, so that the card does not take a whole screen. */
  .lp-sources {
    grid-template-columns: repeat(6, 1fr);
  }

  .lp-source {
    grid-column: span 6;
  }

  .lp-source.is-off {
    grid-column: span 2;
    display: grid;
    gap: 2px;
    padding: 8px 10px;
  }

  .lp-source.is-off .lp-mark,
  .lp-source.is-off small {
    display: none;
  }

  .lp-source.is-off b {
    font-size: 12.5px;
  }

  .lp-source.is-off .lp-source-none {
    margin-left: 0;
    font-size: 11px;
  }

  .lp-section {
    padding: 80px 0;
  }

  .lp-cases {
    grid-template-columns: 1fr;
  }

  .lp-case.wide {
    grid-column: auto;
  }

  .lp-case.wide h3 {
    font-size: 22px;
  }

  .lp-tower li {
    grid-template-columns: 1fr;
    gap: 4px;
    margin: 0 !important;
  }

  .sf-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sf-brand,
  .sf-news {
    grid-column: span 2;
  }

  .sf-base {
    flex-direction: column;
  }

  .sf-legal {
    justify-content: flex-start;
  }
}

/* Changelog (web/public/changelog.html): two rows of filters, then the changes day by day, each a
   card with its tags, its title, what changed and where it is official. */
.cl-programs {
  margin-top: -16px;
}

/* On a phone the filters scroll sideways rather than wrap. */
@media (max-width: 720px) {
  .cl-types,
  .cl-programs {
    flex-wrap: nowrap;
    width: auto;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cl-types a,
  .cl-programs a {
    flex: none;
  }
}

.cl-entry {
  padding: 18px 22px;
}

.cl-programs a {
  padding: 6px 12px;
  font-size: 13px;
}

.cl-day + .cl-day {
  margin-top: 28px;
}

.cl-date {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.cl-entry h3 {
  margin: 10px 0 8px;
  font-size: 16px;
  line-height: 1.35;
}

.cl-entry p {
  margin: 0 0 6px;
}

.cl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* The contents of a legal page (app.js, data-toc): its sections in two columns, at the top. */
.prose-toc {
  margin: 0 0 28px;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--paper);
}

.prose .prose-toc h2 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.prose-toc ol {
  columns: 2 240px;
  column-gap: 28px;
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
}

.prose-toc li {
  break-inside: avoid;
  margin: 0 0 4px;
}

/* What changed, read across (_changes.html): before and after, side by side. */
.cl-diff {
  margin: 4px 0 6px;
  font-size: 13.5px;
}

.cl-diff th[scope='row'] {
  position: static;
  width: 30%;
  background: none;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-2);
  white-space: normal;
  border-bottom: 1px solid var(--line);
}

.cl-diff td {
  width: 35%;
}

/* The positions a publication changed, under it. */
.cl-position {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.cl-position h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 6px;
  font-size: 14.5px;
}

.cl-position .rs-basis {
  margin-right: 0;
}

.cl-position-title {
  flex-basis: 100%;
  font-weight: 500;
  color: var(--ink-2);
}

@media (max-width: 640px) {
  .cl-diff thead {
    display: none;
  }

  .cl-diff tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }

  .cl-diff th[scope='row'] {
    grid-column: 1 / -1;
    width: auto;
    padding: 0;
    border: 0;
  }

  .cl-diff td {
    width: auto;
    padding: 0;
    border: 0;
  }

  .cl-diff td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11.5px;
    color: var(--muted);
  }
}

.cl-meta {
  margin-top: 10px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {

  .calculator-grid {
    grid-template-columns: 1fr;
  }

  .result-panel {
    position: static;
    min-height: 0;
  }

  /* Under the form, before the first estimate, the panel has nothing to show yet: the page stays
     short. The views of the workspace's calculator, and a note waiting for an answer, stay. */
  .result-panel > .calc-empty:not(:has(.calc-empty-note)) {
    display: none;
  }

  .result-panel:has(> .calc-empty:only-child:not(:has(.calc-empty-note))) {
    display: none;
  }
}

@media (max-width: 980px) {

  .menu-toggle {
    display: inline-flex;
    margin-left: -8px;
  }

  .app-sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s;
    box-shadow: var(--shadow-lg);
  }

  .app-sidebar.open {
    transform: none;
  }

  /* The page under the open sidebar is dimmed: a tap there closes it (app.js). */
  body:not(.is-touring):has(.app-sidebar.open)::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgb(14 20 38 / 32%);
  }

  .app {
    margin-left: 0;
  }

  .app-topbar,
  .app-main,
  .app-footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .search-hint {
    display: none;
  }

  .two-columns,
  .assistant-layout,
  .shared-layout,
  .auth {
    grid-template-columns: 1fr;
  }

  .auth-aside {
    padding: 24px;
  }

  .auth-pitch {
    padding: 24px 0 8px;
  }

  .auth-pitch .checks,
  .auth-pitch .mini-stack,
  .auth-aside footer {
    display: none;
  }

  .auth-main {
    padding: 20px 24px;
  }

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

@media (max-width: 720px) {
  :root {
    font-size: 15px;
  }

  .container {
    padding: 0 16px;
  }

  .section {
    padding: 64px 0;
  }

  .two,
  .three,
  .four,
  .form-grid,
  .fields {
    grid-template-columns: 1fr;
  }

  .field-first_name,
  .field-last_name {
    grid-column: 1 / -1;
  }

  .needs li {
    grid-template-columns: 1fr;
  }

  .page-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .app-main {
    padding: 22px 16px 48px;
  }

  .app-topbar {
    padding: 0 12px;
  }

  .card {
    padding: 18px 16px;
  }

  /* The top bar of a phone: the trial in days, the new estimate by its icon, the page's title
     whole (_topbar.html). */
  .trial-pill .trial-long,
  .top-new span {
    display: none;
  }

  .trial-pill .trial-short {
    display: inline;
  }

  .list-row .row-actions {
    justify-content: flex-start;
  }

  .list-row {
    flex-wrap: wrap;
  }

  .kv {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .kv dd {
    margin-bottom: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Server-rendered results (§9): the single result template on screen */

/* What the result says first: the amount, the rate, or that the total is not known yet. */
.rs-summary {
  margin: 14px 0 6px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-tint), var(--surface) 70%);
  border: 1px solid rgb(91 92 240 / 12%);
}

.rs-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.rs-value {
  display: block;
  margin-top: 2px;
  font-size: clamp(30px, 4.4vw, 42px);
  line-height: 1.1;
  font-weight: 650;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* The amount, and beside it, small, what it is of the value of the goods. */
.rs-value-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.rs-value-line .rs-value {
  display: inline;
}

.rs-value-share {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgb(91 92 240 / 10%);
  color: var(--brand-2);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* What the amount is made of: quiet columns under a thin rule. */
.rs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px 16px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgb(91 92 240 / 12%);
}

.rs-stats div {
  min-width: 0;
}

.rs-stats dt {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.rs-stats dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rs-is-rate .rs-value {
  color: var(--brand-2);
}

.rs-is-unknown {
  background: var(--paper);
  border-color: var(--line);
}

.rs-is-unknown .rs-value {
  font-size: 26px;
  color: var(--ink-2);
}

.rs-detail {
  margin: 6px 0 0;
  font-size: 14.5px;
  color: var(--ink-2);
}

.rs-status {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

/* What the amount was calculated for and what it leaves out, under the total. */
.rs-scope {
  display: grid;
  gap: 4px;
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.rs-scope div {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 10px;
}

.rs-scope dt {
  color: var(--muted);
  font-weight: 500;
}

.rs-scope dd {
  margin: 0;
  color: var(--ink-2);
}

@media (max-width: 520px) {
  .rs-scope div {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* A trade agreement that could lower the duty (calculations._agreements): under the summary. */
/* A saving to claim: green, as what is gained, with its action beside it. */
.rs-agreement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 12px 0 0;
  padding: 12px 14px 12px 16px;
  border: 1px solid rgb(4 120 87 / 22%);
  border-radius: 12px;
  background: var(--verified-tint);
  font-size: 13.5px;
  color: var(--ink-2);
}

.rs-agreement > span {
  flex: 1 1 240px;
  min-width: 0;
}

.rs-agreement strong {
  color: var(--verified);
  font-size: 15px;
  font-weight: 650;
}

button.rs-claim {
  flex: none;
  min-height: 0;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--verified);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button.rs-claim:hover {
  background: #036148;
}

/* The breakdown: one line per duty or fee, its share in the bar above. */
.rs-bar {
  display: flex;
  height: 12px;
  margin: 2px 0 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--sunken);
}

.rs-bar i {
  flex: 0 0 calc(var(--fill, 0) * 100%);
  min-width: 3px;
}

.rs-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rs-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.rs-row:first-child {
  border-top: 0;
}

.rs-mark {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 3px;
  flex: none;
}

.rs-what {
  flex: 1;
  min-width: 0;
}

.rs-what strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
}

.rs-what small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.rs-what .mono {
  font-size: 12px;
}

/* What a line is, in plain words, before its rate and its source. */
.rs-what .rs-explained {
  color: var(--ink-2);
  font-size: 13px;
  overflow-wrap: normal;
}

/* The legal basis of a duty, before the label its reading wrote: "Section 338". */
.rs-basis {
  display: inline-block;
  margin-right: 7px;
  padding: 1px 7px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  background: var(--sunken);
  vertical-align: 1px;
  white-space: nowrap;
}

/* A line's amount, and under it its share of the total. */
.rs-figure {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.rs-figure .rs-share {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.rs-amount {
  min-width: 92px;
  text-align: right;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rs-amount.unknown {
  color: var(--faint);
  font-weight: 400;
}

.rs-reserved .rs-what strong,
.rs-reserved .rs-amount {
  color: var(--muted);
}

.rs-what .rs-flag {
  color: var(--warning);
  font-weight: 600;
}

.rs-l-base {
  background: var(--layer-base);
}

.rs-l-s301 {
  background: var(--layer-301);
}

.rs-l-s232 {
  background: var(--layer-232);
}

.rs-l-s201 {
  background: var(--layer-201);
}

.rs-l-s338 {
  background: var(--layer-338);
}

.rs-l-other {
  background: var(--layer-other);
}

.rs-l-fee {
  background: var(--layer-fee);
}

.rs-more {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 6px;
}

.rs-more > summary {
  font-size: 14px;
  color: var(--ink-2);
}

/* The details of a result, folded: what does not apply and why, the official sources, the notes,
   and the fingerprints that replay it. */
.rs-more-body {
  display: grid;
  gap: 16px;
  padding: 10px 0 4px;
}

.rs-more-body h4 {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.rs-sources,
.rs-notes,
.rs-set-aside {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}

.rs-set-aside small,
.rs-notes li {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
}

.rs-data {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.rs-fingerprints > summary {
  font-size: 12.5px;
  color: var(--muted);
}

.rs-fingerprints .kv {
  margin-top: 8px;
  font-size: 12px;
}

.rs-fingerprints .kv dd {
  overflow-wrap: anywhere;
}

.result-status {
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 0 0 14px;
}

.result-section {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 16px;
}

.result-section h3 {
  font-size: 15px;
  margin: 0 0 8px;
}

.result-section .table-wrap {
  margin: 8px 0;
}

.result-section td small,
.result-section li small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.bounds {
  font-weight: 600;
}

.line-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.review-pending details {
  margin-top: 6px;
}

ul.warnings {
  margin: 8px 0;
  padding-left: 18px;
  font-size: 13.5px;
}

.disclaimer {
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
}

.questions .form-grid {
  margin-bottom: 12px;
}

.fact-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fact-field .declared {
  color: var(--warning);
}

.with-unit {
  display: flex;
  gap: 8px;
  align-items: center;
}

.with-unit input {
  flex: 1;
}

.result-actions form > label {
  display: block;
  margin-bottom: 10px;
}

.result-actions details {
  margin-top: 12px;
}

/* The public calculator's invitation to keep an estimate: where a visitor becomes a customer. */
.result-keep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--brand-soft);
  border-radius: 14px;
  background: var(--brand-tint);
}

.result-keep > div:first-child {
  flex: 1 1 260px;
}

.result-keep strong {
  display: block;
  font-size: 15px;
}

.result-keep p {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--ink-2);
}

.result-keep .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.htmx-indicator {
  display: none;
  margin-left: 12px;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline;
}

/* Review console (§11.8) */

/* Review cases: two groups that never overlap, then what is reviewed. */
.rq-groups {
  margin: 0 0 18px;
}

.rq-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.rq-main a {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.rq-main a:hover {
  border-color: var(--line-2);
}

.rq-main a[aria-current='page'] {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

.rq-main strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

.rq-main small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

.rq-note {
  margin: 8px 2px 12px;
  font-size: 12.5px;
  color: var(--muted);
}

.rq-reach {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Models: one card per model, side by side. */
/* One model per row, its three parts side by side: the models line up, part by part. */
.md-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

.md-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 28px;
  align-items: start;
}

.md-nowrap {
  white-space: nowrap;
}

/* The form that measures a model, above the measures it asked. */
.md-measure {
  margin-bottom: 18px;
}

.md-measure .form-grid {
  margin-bottom: 12px;
}

.md-card {
  margin: 0;
}

.md-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.md-head h2 {
  margin: 0;
  font-size: 18px;
}

.md-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  margin: 0 0 6px;
}

.md-facts div {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--paper);
}

.md-facts dt {
  font-size: 12px;
  color: var(--muted);
}

.md-facts dd {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.md-block {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 14px;
}

.md-block h3 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--ink-2);
}

.md-big {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 34px;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.md-big small {
  display: block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

.md-bar {
  display: flex;
  height: 10px;
  margin-bottom: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--sunken);
}

.md-bar i {
  flex: 0 0 calc(var(--fill, 0) * 100%);
}

.md-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 13.5px;
  color: var(--ink-2);
}

.md-legend li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.md-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
  align-self: center;
}

.md-legend small {
  color: var(--muted);
}

.md-same,
.md-validated {
  background: var(--verified);
}

.md-different,
.md-rejected {
  background: var(--layer-301);
}

.md-corrected {
  background: var(--layer-other);
}

.md-edition + .md-edition {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.md-edition h4 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.md-rate {
  margin: 0 0 8px;
  font-size: 13.5px;
  color: var(--ink-2);
}

.md-rate strong {
  margin-right: 4px;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.md-rate small {
  color: var(--muted);
}

.md-sub {
  margin: 12px 0 6px;
  font-size: 13px;
  color: var(--muted);
}

.md-automatic {
  background: var(--verified);
}

.md-agreed {
  background: var(--brand);
}

.md-disagreement {
  background: var(--layer-301);
}

.md-control {
  background: var(--layer-232);
}

.md-doubt {
  background: var(--layer-other);
}

.md-finding {
  background: var(--layer-fee);
}

.md-other,
.md-waiting {
  background: var(--line-2);
}

.md-one_reading,
.md-closed {
  background: var(--bar-muted);
}

/* Editions: where the Chapter 99 positions of each edition stand, and the next step. */
.ed-legend {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 13px;
  color: var(--muted);
}

.ed-legend li,
.ed-progress p span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ed-legend strong {
  color: var(--ink);
  font-weight: 600;
}

.ed-legend i,
.ed-progress p i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

.ed-table td {
  vertical-align: top;
}

/* A few editions at a time (data-visible-rows, measured by app.js), the others behind the scroll
   bar, under the header that stays. */
.table-wrap[data-visible-rows] {
  max-height: var(--visible-height, 480px);
  overflow-y: auto;
}

/* The official notices that amend an edition, by state, under its positions; the documents
   waiting for the model's sorting and the last reading of each source, above the table. */
.ed-progress p.ed-notices {
  margin-top: 6px;
  color: var(--muted);
}

.ed-notices strong {
  color: var(--ink-2);
  font-weight: 600;
}

.ed-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ink-2);
}

.ed-late {
  color: var(--danger);
  font-weight: 600;
}

/* The steps a reading does, and whether it does them again, at the head of its options. */
.ed-steps-chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

/* The options a reading estimated is to read with, under its decision (review/editions.html). */
.ed-options-said {
  display: block;
  margin-top: 2px;
}

.ed-table td.num small {
  white-space: nowrap;
}

.ed-name {
  min-width: 200px;
}

.ed-name strong,
.ed-name small,
.ed-name > span {
  display: block;
}

.ed-name small {
  margin-top: 2px;
}

.ed-name > span {
  margin-top: 4px;
}

.ed-progress {
  min-width: 260px;
  width: 40%;
}

.ed-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--sunken);
}

.ed-bar i {
  flex: 0 0 calc(var(--fill, 0) * 100%);
  min-width: 3px;
}

.ed-progress p {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}

.stage-modeled {
  background: var(--verified);
}

.stage-settled {
  background: #6fcf9f;
}

.stage-to_publish {
  background: var(--brand);
}

.stage-review {
  background: var(--layer-other);
}

.stage-waiting {
  background: var(--layer-301);
}

.ed-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 14px;
}

.ed-steps a {
  font-weight: 600;
}

.ed-steps small {
  color: var(--muted);
}

/* The page's actions and whether the chain reads by itself, on one line (review/editions.html). */
/* The archives' download, from the day chosen. */
.ed-archives {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* The label beside its date, both as tall as the buttons around them. */
.ed-archives label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.ed-archives input {
  width: auto;
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
}

.ed-toolbar .ed-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 14px;
}

/* The reading of the editions ticked, under their table, its options folded. */
.ed-read {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 16px;
}

.ed-options {
  border-top: 0;
}

.ed-options summary {
  justify-content: flex-start;
  padding: 6px 0;
}

.ed-options[open] {
  flex-basis: 100%;
  padding-bottom: 0;
}

.ed-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--verified);
  font-weight: 600;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 18px;
  align-items: start;
}

.passage-text {
  max-height: 420px;
  overflow: auto;
  font-size: 13px;
  line-height: 1.6;
  background: var(--sunken);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.passage-text mark {
  background: var(--warning-tint);
  outline: 1px solid var(--warning-line);
}

/* On a light ground: the tints of the added and removed lines carry dark text. */
pre.diff,
pre.json {
  max-height: 520px;
  overflow: auto;
  font-size: 12px;
  background: var(--sunken);
  color: var(--ink);
  border-color: var(--line);
}

pre.diff span {
  display: block;
  padding: 0 4px;
}

pre.diff .add {
  background: var(--brand-tint);
  color: var(--brand-2);
}

pre.diff .del {
  background: var(--danger-tint);
  color: var(--danger);
}

.reasons {
  margin: 0 0 12px;
  padding-left: 18px;
}

.reasons li {
  margin-bottom: 4px;
}

.variant {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.variant h3 {
  margin: 0 0 8px;
}

.variant .relation {
  margin-bottom: 6px;
}

details.passage > summary {
  padding: 10px 0;
  font-weight: 500;
}

details.passage > p {
  margin: 0 0 8px;
}

td.changed {
  background: var(--brand-tint);
}

.review-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

.review-filter label {
  flex: 1;
  min-width: 260px;
  margin: 0;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 16px 0;
}

.notice > .notice-body {
  flex: 1;
  min-width: 0;
}

.notice-body > p:first-child {
  margin-top: 0;
}

.notice-body > :last-child {
  margin-bottom: 0;
}

/* Assistant fact cards (§8): rendered by the server from the engine's results */

.fact-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 10px 12px;
  margin: 8px 0;
  font-size: 13.5px;
}

.fact-card ul {
  margin: 6px 0;
  padding-left: 18px;
}

.fact-card small {
  color: var(--muted);
}

/* Two-factor setup: the QR code stays dark on light in every theme so phones can read it. */
.qr-code { display: inline-block; padding: 12px; background: #fff; border-radius: 8px; line-height: 0; }
.qr-code svg { width: 192px; height: 192px; }
.backup-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 6px 16px; padding: 0; list-style: none; }

/* The code suggestions of the calculator on a phone: the code and its rate above, the words below. */
@media (max-width: 640px) {
  .hts-option {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
  }

  .hts-option-text {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Workspace home on narrow screens; the welcome on short ones (a phone held sideways). */

@media (max-height: 560px) {
  .welcome-art {
    height: 120px;
  }

  .welcome-slide h2 {
    margin-top: 16px;
  }
}

@media (max-width: 1180px) {
  .home-grid {
    grid-template-columns: 1fr;
  }

  .home-start {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .home-start .steps {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .home-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .home-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 2px;
    padding: 16px;
  }

  .home-icon {
    grid-row: span 2;
  }

  .home-action strong {
    margin-top: 0;
  }

  .home-go {
    display: none;
  }

  .home-start {
    gap: 18px;
  }

  .home-start .steps {
    grid-template-columns: 1fr;
  }

  .home-ring {
    width: 64px;
    height: 64px;
  }

  .home-ring::before {
    inset: 6px;
  }

  .home-ring strong {
    font-size: 18px;
  }

  .welcome-foot {
    flex-wrap: wrap;
  }
}