/* Public landing page. */

.landing { background: var(--surface); }

/* The mark at one end, the language at the other, and a rule under both. There
   are only two things in this bar now, so it stays on one line at any width a
   phone has - which is what let the stacking rule at the bottom of this file go. */
/* The public bar stays put.

   It carries the two controls a visitor is most likely to want *while reading* -
   the language and the theme - and both were at the top of a page that runs to
   several screens of pricing and FAQ. Somebody four sections down who wanted the
   page in Bosnian had to scroll back for it, which is the same as not having it.

   The header is the sticky element rather than the nav inside it, so the bar
   spans the viewport while its contents stay on the 1120px column with
   everything else. A translucent ground with a blur behind it, so the page
   reads as continuing underneath rather than as being cut off - with an opaque
   fallback first for the browsers that do not do backdrop-filter, since without
   one the bar is simply see-through and the text runs into the page. */
.public-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .public-header {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

.landing-nav {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 24px;
}

.landing-nav .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 680; }
.landing-nav .brand:hover { text-decoration: none; }
.landing-nav .brand img { width: 150px; max-width: 46vw; }
.landing-nav .links { display: flex; align-items: center; gap: 8px; }

.hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 24px 56px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  font-size: 2.9rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.hero .lede { font-size: 1.1rem; color: var(--ink-muted); margin-bottom: 26px; max-width: 46ch; }

/* The two calls to action, as a pair rather than as two buttons that happen to
   be adjacent. `align-items: stretch` is what makes them the same height when
   one label wraps in Bosnian and the other does not, and the shared floor width
   stops "Sign in" coming out half the size of the button beside it. */
.hero-actions,
.closing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}
.hero-actions .btn,
.closing-actions .btn { min-width: 190px; }
.closing-actions { justify-content: center; }

.hero-note { margin-top: 14px; font-size: 0.85rem; color: var(--ink-faint); }

.hero-visual {
  background: var(--brand-tint);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--shadow-lg);
}

.hero-doc {
  /* A picture of an invoice, so it is paper - see the paper tokens in main.css. */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px;
  font-size: 0.75rem;
}

.hero-doc .doc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.hero-doc .doc-title { font-size: 1.3rem; font-weight: 300; letter-spacing: 0.06em; color: var(--brand); }
.hero-doc .doc-rule { height: 1px; background: var(--line); margin: 12px 0; }
.hero-doc .doc-line { height: 7px; background: var(--line); border-radius: 3px; margin-bottom: 7px; }
.hero-doc .doc-line.w40 { width: 40%; }
.hero-doc .doc-line.w60 { width: 60%; }
.hero-doc .doc-line.w80 { width: 80%; }
.hero-doc .doc-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.hero-doc .doc-total { display: flex; justify-content: space-between; padding-top: 10px; font-weight: 700; color: var(--brand); }

.section { max-width: 1120px; margin: 0 auto; padding: 56px 24px; }
.section-tinted { background: var(--canvas); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-tinted .section { padding: 56px 24px; }

.section-head { text-align: center; max-width: 620px; margin: 0 auto 38px; }
.section-head h2 { font-size: 1.9rem; letter-spacing: -0.02em; }
.section-head p { color: var(--ink-muted); }

.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

/* The features grid and the document guide are the same object - a heading with
   an icon on it and a sentence underneath - so they share one definition rather
   than two that drift apart.

   The icon used to sit in a 38px tinted tile above the heading. Inline in the
   heading it reads as belonging to the words rather than as decoration over
   them, it lets the eye run straight down the six titles, and it drops a block
   of colour that was competing with the actual content. */
.feature,
.doc-kind {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.feature h3,
.doc-kind h3 {
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1rem;
}
.feature h3 svg,
.doc-kind h3 svg { color: var(--brand); flex: none; }

.feature p,
.doc-kind p { font-size: 0.9rem; color: var(--ink-muted); margin: 0; line-height: 1.55; }

/* --- Template gallery ------------------------------------------------------ */

.template-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }

.template-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
}

/* The sketch of the page - the same partial and stylesheet as the gallery
   (designs/_thumb.html, core/css/sketch.css), on the same grey ground, so a
   template looks the same here as it does once you have signed up. */
.template-chip .template-thumb {
  display: block;
  padding: 12px;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}

.template-chip .name { padding: 10px; font-size: 0.85rem; font-weight: 600; }

/* --- Pricing --------------------------------------------------------------- */

/* The heading and the period switch are centred over the four cards - there is
   nothing else on this page to align them to the left of. The column itself
   stays where `.content-wide` puts it on every other page; only what sits above
   the grid moves. */
.plan-page .page-head { justify-content: center; text-align: center; }

/* Column flex rather than `text-align`, which would centre every feature row
   inside all four cards. The grid takes its full width back, since a column
   flex would otherwise shrink it to its content.

   On the component, not on `.plan-page`. Scoped to that class it centred the
   switch on the signed-in plan page and left the identical control sitting
   against the left margin of the public pricing section, which is the same
   component in the same layout and should not need to know which page it is on. */
.plan-periods { display: flex; flex-direction: column; align-items: center; }
.plan-periods > .pricing-grid { width: 100%; }

/* --- The monthly/yearly switch ----------------------------------------------
   Every rule below hangs off `:checked ~`, so the two inputs have to remain
   siblings of both the switch and the grid - see the comment in plan.html.
   Hidden with clip rather than display:none, because a radio that is not
   rendered is a radio the keyboard cannot reach. */
.plan-period-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.plan-switch {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 22px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--canvas);
}

.plan-switch label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.plan-switch label:hover { color: var(--ink); }
.plan-switch label .icon { width: 14px; height: 14px; opacity: 0.6; }

#plan-period-monthly:checked ~ .plan-switch label[for="plan-period-monthly"],
#plan-period-yearly:checked ~ .plan-switch label[for="plan-period-yearly"] {
  background: var(--surface);
  color: var(--brand);
  box-shadow: 0 1px 2px rgba(22, 32, 44, 0.1);
}
#plan-period-monthly:checked ~ .plan-switch label[for="plan-period-monthly"] .icon,
#plan-period-yearly:checked ~ .plan-switch label[for="plan-period-yearly"] .icon { opacity: 1; }

/* The group takes the focus ring, since the radio itself is clipped away. */
.plan-period-input:focus-visible ~ .plan-switch { outline: 2px solid var(--brand); outline-offset: 2px; }

/* One price is shown, the other is removed. `.plan-save` belongs to yearly. */
#plan-period-monthly:checked ~ .pricing-grid .price-yearly,
#plan-period-monthly:checked ~ .pricing-grid .plan-save,
#plan-period-yearly:checked ~ .pricing-grid .price-monthly { display: none; }

/* --- Four cards that read across ---------------------------------------------

   The four tiers are a comparison table drawn as cards, and a comparison table
   whose rows do not line up is four lists that happen to be adjacent. Making
   them line up takes three things, and all three are needed:

   1. The same rows in the same order in every card - see
      PlanFeatures.feature_rows, which no longer sorts included-first.
   2. The same number of children in every card. The euro restatement is now
      always emitted, empty on the tiers that have no figure, because a card with
      one child fewer pulled everything below it up by that line's height.
   3. `subgrid`, below. The first two get the rows into the same *sequence*; only
      this gets them to the same *height*, and they need to be, because
      "Unlimited invoices / month" wraps to two lines in a column where
      "2 invoices / month" does not.

   Everything is declared on the outer grid: three rows above the features, one
   row per feature, one for the button. The card and its feature list both opt
   into those rows with `grid-template-rows: subgrid`, so a row's height is the
   tallest of the four across the whole table. */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* The number of feature rows, which CSS cannot count for itself. It is the same
   for every tier by construction, and
   `apps/autho/tests/test_plan_table.py::FeatureRowTests` fails if this number
   and `len(feature_rows)` ever disagree - at which point the last rows of the
   table would silently stop aligning. */
.pricing-grid { --feature-rows: 19; }


.price-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2),
              box-shadow 0.22s ease, border-color 0.18s ease;
}

/* The card lifts under the pointer.

   6px, not the 3 it used to be: at three the movement was inside the noise of a
   shadow appearing and read as nothing happening at all. The easing overshoots
   slightly on the way up, which is what makes it read as a lift rather than as a
   jump.

   It does take the hovered column briefly out of line with the other three -
   that is what lifting one card out of a row of four means - and it is worth it:
   the pointer is on one card, and the card answering it is the point. */
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgb(22 32 44 / 0.12);
}


/* The tier you are on. An outline and a ring rather than a fill: it is a
   statement of fact, and the tier the table argues for is the one that gets
   the colour. */
.price-card.is-current { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.price-card.is-current:hover { box-shadow: 0 0 0 3px var(--brand-light), 0 10px 24px rgba(22, 32, 44, 0.09); }

/* The one tier the table argues for. A brand outline and a solid button - two
   small signals rather than one loud one. It used to add a tinted ground, a
   gradient rule across the top and a stronger ruled grain as well; the
   outline says the same thing alone. */
.price-card.is-recommended {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}
.price-card.is-recommended:hover { box-shadow: 0 0 0 1px var(--brand), 0 14px 30px rgb(22 32 44 / 0.12); }
.price-card.is-recommended h3 { color: var(--brand); }

/* The tier name and whatever marks it, on one line. */
.price-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
}

.plan-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.plan-flag .icon { width: 12px; height: 12px; }

.price-card h3 { font-size: 1.05rem; margin: 0; }
.price-card .price { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; margin: 10px 0 14px; }
.price-card .price small { font-size: 0.82rem; font-weight: 500; color: var(--ink-faint); }
.price-per { font-size: 0.82rem; font-weight: 500; color: var(--ink-faint); margin-left: 4px; letter-spacing: 0; }

/* On the euro line, at its right - see the comment in the pricing cards.

   It was beside the price, which is the obvious place and the wrong one: a
   1.9rem price and a badge together are wider than a quarter of the grid, so it
   wrapped, and everything under it in that card dropped by a line. */
.plan-save {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--brand-light);
  color: var(--brand);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0;
}
.plan-save .icon { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }

/* The action is pinned to the bottom of whichever card is tallest, so the four
   buttons land on one line instead of wherever each feature list happens to
   end. `.price-features` already takes `flex: 1`, which is what leaves the
   slack for this to be pushed down into. */
.plan-action { margin-top: auto; }

/* The current-tier marker is sized as a button, not as a badge: it stands in
   the same slot as one, and matching its box is what keeps the bottom of the
   cards on one line. */
.plan-current {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 8px 15px;
  border: 1px dashed var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-light);
  color: var(--brand);
  font-size: 0.89rem;
  font-weight: 600;
}

.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  font-size: 0.88rem;
  flex: 1;
}

/* Tighter than they were.

   Every row is now as tall as the tallest of the four cells on it - that is what
   subgrid does - so a two-line label in one column sets the height of the row in
   all four, and the padding is paid four times over. 3px and a 1.35 line-height
   take about a third off the table without crowding it; the rest came from
   shortening the two labels that were wrapping (see FEATURE_ALL_TEMPLATES and
   FEATURE_NO_BRANDING in the catalogues). */
.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 3px 0;
  line-height: 1.35;
}

.price-mark { flex: none; display: flex; align-items: center; height: 1.35em; }
.price-label { min-width: 0; }

/* Included: full-contrast text, the value or capability in bold so a glance
   down the column reads as a list of what you get. */
.price-features li.is-on { color: var(--ink); }
.price-features li.is-on .price-mark { color: var(--ok); }
.price-features li.is-on strong { font-weight: 650; }

/* Excluded: muted and unemphasised, with a neutral dash rather than a red
   cross — absent, not an error. */
.price-features li.is-off { color: var(--ink-faint); }
.price-features li.is-off .price-mark { color: var(--line-strong); }

/* Only while the four cards are actually side by side.

   Below 980px the grid drops to two columns and below 620px to one, and
   `grid-row: 1 / -1` does not survive either: it pins every card to the same
   rows, so in two columns the third and fourth are laid on top of the first
   and second instead of wrapping under them. There is nothing to align
   across at those widths anyway - the columns are no longer beside each
   other - so the cards go back to being flex boxes that wrap like any other
   div, which is what the breakpoints below already expect. */
@media (min-width: 981px) {
  @supports (grid-template-rows: subgrid) {
    .pricing-grid {
      /* head, price, euro, the features, the button. */
      grid-template-rows: auto auto auto repeat(var(--feature-rows), auto) auto;
    }
    .price-card {
      grid-row: 1 / -1;
      display: grid;
      grid-template-rows: subgrid;
    }
    .price-features {
      grid-row: span var(--feature-rows);
      display: grid;
      grid-template-rows: subgrid;
      /* The rows come from the parent now; `flex: 1` was what pushed the button
         to the foot and has nothing to push against inside a grid. */
      flex: none;
    }
    /* Its row is the last one, so it is already at the foot. */
    .plan-action { margin-top: 0; }
  }
}


/* The euro restatement under the price. Muted and a size down, because it is
   not the number being charged - the mark above it is. It follows the period
   switch, so each half is shown and hidden with its own price. */
.price-eur {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin: -8px 0 14px;
}
/* Empty on the tiers with no figure to restate. `:empty` does not match it - it
   contains whitespace - so the box is collapsed by the absence of a child
   instead. Without this the blank row still reserved its height in every card. */
.price-eur:not(:has(span)) { margin: 0; min-height: 0; }

/* What a card payment means, under the pricing grid on the public page. */
.pricing-terms { max-width: 780px; margin: 32px auto 0; }
.pricing-terms-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 22px;
  text-align: center;
}
.pricing-terms-row .card-marks { align-items: center; }

/* --- Published policies ------------------------------------------------------
   The four documents a card acquirer requires. One readable column - these are
   read start to finish, or jumped into at an anchor from the application, and
   neither is helped by a page-wide measure. */
.legal {
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}

/* The four numbered steps under "How to create an invoice".

   Numbered by the list itself through a counter rather than by digits typed
   into the copy: the markup is an <ol>, so the order is already stated once,
   and a hand-typed "1." in a translation is a thing that goes wrong when a step
   is inserted in one language and not the others. */
.howto-steps {
  list-style: none;
  counter-reset: howto;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.howto-steps li {
  counter-increment: howto;
  position: relative;
  padding-top: 52px;
}

.howto-steps li::before {
  content: counter(howto);
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
  font-size: 1.05rem;
}

/* The rule joining one step to the next, so the four read as a sequence rather
   than as four unrelated cards. Not drawn after the last one, and not drawn at
   all once the grid has wrapped to a column - a horizontal rule leaving the
   bottom of a stacked step points at nothing. */
.howto-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 19px;
  left: 46px;
  right: -22px;
  height: 2px;
  background: var(--line);
}

.howto-steps h3 { font-size: 1rem; margin-bottom: 6px; }
.howto-steps p { color: var(--ink-muted); margin: 0; font-size: 0.94rem; }

.howto-action { margin-top: 34px; text-align: center; }

@media (max-width: 900px) {
  .howto-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .howto-steps li:not(:last-child)::after { display: none; }
}

@media (max-width: 560px) {
  .howto-steps { grid-template-columns: 1fr; gap: 18px; }
  /* Stacked, the number sits beside the heading rather than above it: a 52px
     gutter above every step is most of a phone screen spent on nothing. */
  .howto-steps li { padding: 0 0 0 52px; min-height: 38px; }
}

/* The trail above a policy document, and the visible half of its
   BreadcrumbList. Small and quiet: it is orientation for somebody who arrived
   from a search result, not navigation the page is built around. */
.breadcrumb { margin-bottom: 18px; }

.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  color: var(--ink-faint);
}

.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }

/* The separator is drawn rather than written, so it is not read out as a word
   and not part of the text a crawler extracts from the trail. */
.breadcrumb li + li::before { content: "/"; color: var(--line); }

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-muted);
  text-decoration: none;
}

.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb a svg { width: 14px; height: 14px; }
.breadcrumb [aria-current="page"] { color: var(--ink); }

.legal-head { margin-bottom: 34px; }
.legal-head h1 { font-size: 2.1rem; letter-spacing: -0.02em; }
.legal-head .lede { font-size: 1.05rem; color: var(--ink-muted); margin-bottom: 12px; }

.legal-updated {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-faint);
}

/* Each section is a landmark somebody may have been sent straight to, so it
   gets a rule above it and enough room under the header that an anchored jump
   does not leave the heading against the top of the window. */
.legal-section {
  padding-top: 26px;
  margin-top: 26px;
  border-top: 1px solid var(--line);
  /* Clear of the sticky bar, not just of the viewport edge: an anchored jump
     used to land the heading underneath it. 66px of bar plus the 24px of air
     the section wanted anyway. */
  scroll-margin-top: 90px;
}
.legal-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.legal-section h2 { font-size: 1.25rem; margin-bottom: 10px; }
.legal-section p { color: var(--ink-muted); line-height: 1.65; }
.legal-section p strong { color: var(--ink); }

.legal-list, .legal-steps { margin: 12px 0 14px; padding: 0; }
.legal-list { list-style: none; display: grid; gap: 8px; }
.legal-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink-muted);
  line-height: 1.55;
}
.legal-list .icon { flex: none; margin-top: 0.25em; color: var(--brand); }

/* The steps of a card payment, numbered because the order is the point. */
.legal-steps { padding-left: 22px; display: grid; gap: 8px; color: var(--ink-muted); }
.legal-steps li { line-height: 1.55; padding-left: 4px; }

.legal .detail-meta { margin: 14px 0; }
.legal .table-wrap { margin: 16px 0; }

/* The other three documents, at the foot of whichever one is open. */
.legal-more { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.legal-more h2 { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }

.legal-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 0.88rem;
}
.legal-nav li { display: inline-flex; }
.legal-nav a, .legal-nav .is-current {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.legal-nav .icon { color: var(--ink-faint); flex: none; }
/* The one being read is not a link to itself. */
.legal-nav .is-current { color: var(--ink); font-weight: 600; }
.legal-nav .is-current .icon { color: var(--brand); }

/* The merchant's own contact routes, as three targets rather than a paragraph
   of small print - a customer looking for a phone number should find it at a
   glance, which is the whole reason this is on the checklist. */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.contact-card {
  display: grid;
  gap: 3px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
a.contact-card:hover { border-color: var(--brand); text-decoration: none; }
.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 4px;
  border-radius: 9px;
  background: var(--brand-light);
  color: var(--brand);
}
.contact-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  font-weight: 650;
}
.contact-card strong { word-break: break-word; }

/* --- Footer ---------------------------------------------------------------- */

.landing-footer {
  border-top: 1px solid var(--line);
  background: var(--canvas);
}

/* Three columns above the copyright line: who we are, what we publish, how to
   reach us. All three are merchant-checklist items, and a footer is where a
   customer looks for them without being told to. */
.footer-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 24px 8px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 32px;
}

.footer-col h2 {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
.footer-col .legal-nav { flex-direction: column; gap: 9px; }
.footer-brand .brand-logo { width: 150px; opacity: 0.85; margin-bottom: 10px; }
.footer-brand p { color: var(--ink-muted); margin-bottom: 14px; max-width: 34ch; }

.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 0.86rem;
  color: var(--ink-muted);
}
.footer-contact li { display: flex; align-items: flex-start; gap: 9px; }
.footer-contact .icon { flex: none; margin-top: 0.2em; color: var(--ink-faint); }

@media (max-width: 860px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-main { grid-template-columns: 1fr; gap: 26px; padding-top: 32px; }
  .legal { padding: 32px 16px 48px; }
  .legal-head h1 { font-size: 1.7rem; }
}

/* Ends apart on one line; both centred once they need two.

   `space-between` on a row that has wrapped leaves each line's single item hard
   against the left, which is what made the broken footer read as two stray
   scraps rather than as a footer. So the fold is made explicit: below the width
   where the mark and the notice stop sharing a line, the row becomes a centred
   column. Measured rather than guessed - the notice is the longer of the two in
   German, and it is what runs out of room first. */
.landing-footer .inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px 16px;
  flex-wrap: wrap;
  font-size: 0.86rem;
  color: var(--ink-muted);
}

@media (max-width: 620px) {
  .landing-footer .inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

/* The brand mark only. Written as a bare `img` it also caught the three card
   acceptance marks in the column beside it and drew each of them 132px wide,
   which is both wrong and, for a scheme mark, not permitted. */
.landing-footer .brand-logo { width: 132px; opacity: 0.75; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 44px; }
  .hero h1 { font-size: 2.2rem; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .feature-grid, .pricing-grid, .template-strip { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.9rem; }

  /* Inline while there is room for a pair, full width once there is not. Two
     buttons sized to their own labels on a narrow screen give a ragged left
     edge and two different tap targets for two decisions of equal weight; at
     full width they are a stack of equal choices, which is what they are.
     `min-width` has to go, or the floor above keeps them from shrinking. */
  .hero-actions,
  .closing-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn,
  .closing-actions .btn { min-width: 0; width: 100%; }
}

/* Shown instead of a switch button on tiers that are not self-service. */
.price-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 0.83rem;
  color: var(--ink-faint);
  text-align: center;
}

/* Walkthrough video.
 *
 * Sat in a window-like frame so the recording reads as the product rather than
 * a stray media file, and given a fixed 1440x900 aspect ratio so the section
 * reserves its height before the poster loads. */
.demo-frame {
  max-width: 940px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.demo-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}

.demo-chrome span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-strong);
}

.demo-video {
  display: block;
  width: 100%;
  aspect-ratio: 1440 / 900;
  background: var(--canvas);
}

.demo-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  font-size: 0.83rem;
  color: var(--ink-faint);
  text-align: center;
}

.demo-note .icon { flex: none; }

/* Closing call to action, where the pricing table used to sit. */
.closing .section-head { margin-bottom: 22px; }

.closing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}


/* Play badge, drawn over the poster until the walkthrough starts.
 * Added by demo-video.js; without it the video keeps its native controls. */
.demo-frame { position: relative; }

.demo-play {
  position: absolute;
  left: 50%;
  top: calc(50% + 17px); /* Offset by half the chrome bar, to centre on the video. */
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  padding: 0 0 0 4px; /* The triangle's mass sits left of centre. */
  border: none;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  cursor: pointer;
  box-shadow: 0 10px 34px rgba(16, 24, 34, 0.34);
  transition: transform 0.16s ease, background 0.16s ease;
}

.demo-play:hover { background: var(--brand-dark); transform: translate(-50%, -50%) scale(1.06); }
.demo-play:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.demo-play[hidden] { display: none; }

/* Under 500px the wordmark goes.

   The bar holds three things: the wordmark, the theme switch and the language
   switch. The switchers are six targets between them and cannot shrink - 26px is
   already the floor for something a thumb has to hit - so the wordmark is the
   only thing on the row that can give, and it is the one part carrying no
   function.

   Measured: with the wordmark shown the bar is 67px down to 421px wide and 96px
   at 420 and below, where the switchers wrap onto a second line. So the hard
   failure starts at 420, and 500 is the threshold with room to spare - which
   matters more than it used to now that the bar is sticky and any second line it
   grows is a second line on every screen of the page.

   499.98px rather than 499px: viewport widths are not integers on a fractional
   DPI display, and at 499.5 a `max-width: 499px` query does not match.

   The whole link goes, not just the image inside it. Hiding the `img` alone
   leaves the anchor behind as an invisible box that still takes the row's gap
   and can still be clicked. */
@media (max-width: 499.98px) {
  .landing-nav .brand { display: none; }
  /* Nothing on the left any more, so the switchers take the full row rather
     than sitting jammed against its right edge. */
  .landing-nav { justify-content: center; }
  .landing-nav .links { justify-content: center; }
}

@media (max-width: 620px) {
  /* The bar carries the mark and the two switchers, so on a narrow screen it
     only needs a tighter gutter and permission to wrap. */
  .landing-nav { padding: 10px 16px; }
  .landing-nav .links { flex-wrap: wrap; justify-content: flex-end; }

  .section, .section-tinted .section { padding: 40px 16px; }
  .section-head h2 { font-size: 1.55rem; }

  /* The badge is sized against a 940px frame; on a phone it swallows the
     poster. */
  .demo-play { width: 60px; height: 60px; }
  .demo-play svg { width: 26px; height: 26px; }
}

/* --- Which document you need ----------------------------------------------- */
/* Same card as the feature grid above; see that rule. */
.doc-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 900px) {
  .doc-guide { grid-template-columns: 1fr; }
}

/* --- The walkthrough's watch page ------------------------------------------
   The page whose subject is the video, rather than the section of the landing
   page the clip is embedded in. The layout is the argument: heading, player,
   then the words, with nothing above the player that is not about the video.
   A video pushed below the fold, or shrunk to the width of a paragraph, is one
   of the things Google reads as "not the main content of the page". */
.watch,
.topic {
  max-width: 940px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

.watch-head,
.topic-head { margin-bottom: 20px; }
.watch-head h1,
.topic-head h1 { font-size: 2rem; letter-spacing: -0.02em; }
.watch-head .lede,
.topic-head .lede { font-size: 1.05rem; color: var(--ink-muted); margin: 10px 0 0; }

/* The same framed player as the landing section, without the fake browser
   chrome above it: there the frame is a screenshot of the product, here it is
   the thing the visitor came for. */
.watch-frame {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.watch-video {
  display: block;
  width: 100%;
  aspect-ratio: 1440 / 900;
  background: var(--canvas);
}

/* Length, date and the caption note - the same three facts the VideoObject
   publishes, printed where a person can read them. */
.watch-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 14px 0 0;
  font-size: 0.84rem;
  color: var(--ink-faint);
}

.watch-meta span { display: inline-flex; align-items: center; gap: 7px; }
.watch-meta svg { width: 15px; height: 15px; flex: none; }

/* Back to a reading measure under the player: 940px is right for a 16:10 frame
   and too wide for a paragraph. */
.watch-section,
.topic-section {
  max-width: 780px;
  padding-top: 26px;
  margin-top: 26px;
  border-top: 1px solid var(--line);
}

.watch-section h2,
.topic-section h2 { font-size: 1.25rem; margin-bottom: 10px; }
.watch-section p,
.topic-section p { color: var(--ink-muted); line-height: 1.65; }
.watch-section p + p,
.topic-section p + p { margin-top: 10px; }

/* What happens in the clip, in order. Numbered by a counter for the same
   reason the how-to steps are: the <ol> already states the order, and a digit
   typed into a translation goes stale the moment a step is inserted. */
.watch-steps,
.topic-steps {
  list-style: none;
  counter-reset: watch;
  margin: 4px 0 0;
  padding: 0;
}

.watch-steps li,
.topic-steps li {
  counter-increment: watch;
  position: relative;
  padding: 0 0 0 40px;
  margin-top: 12px;
  color: var(--ink-muted);
  line-height: 1.6;
}

.watch-steps li::before,
.topic-steps li::before {
  content: counter(watch);
  position: absolute;
  top: 1px;
  left: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
  font-size: 0.82rem;
}

.watch-actions,
.topic-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.watch-back,
.topic-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.92rem;
}

.watch-back:hover,
.topic-back:hover { color: var(--brand); text-decoration: underline; }
.watch-back svg,
.topic-back svg { width: 15px; height: 15px; }

@media (max-width: 700px) {
  .watch,
  .topic { padding: 28px 16px 48px; }
  .watch-head h1,
  .topic-head h1 { font-size: 1.6rem; }
}

/* --- The e-invoicing page ----------------------------------------------------
   An article in the watch page's column, sharing its rules above - heading,
   sections at a reading measure, numbered steps, the call to action at the
   foot. Narrower overall, since there is no 16:10 player to make room for:
   the heading lines up with the sections under it. What is its own: the two
   formats side by side, the mandate as dated lines, and a short FAQ. */
.topic { max-width: 828px; }

.topic-section h2 { display: flex; align-items: center; gap: 9px; }
.topic-section h2 svg { width: 20px; height: 20px; flex: none; color: var(--brand); }

.topic-formats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.topic-format {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.topic-format h3 { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; margin-bottom: 8px; }
.topic-format h3 svg { width: 18px; height: 18px; flex: none; color: var(--brand); }
.topic-section .topic-format p { font-size: 0.95rem; }

/* Dated lines, each with a brand dot - not numbered: they are a timeline, and
   the year in each sentence already orders them. */
.topic-timeline { list-style: none; margin: 4px 0 14px; padding: 0; }
.topic-timeline li {
  position: relative;
  padding-left: 22px;
  margin-top: 10px;
  color: var(--ink-muted);
  line-height: 1.6;
}
.topic-timeline li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

.topic-faq { margin: 4px 0 0; }
.topic-faq dt { margin-top: 16px; font-weight: 600; color: var(--ink); }
.topic-faq dd { margin: 4px 0 0; color: var(--ink-muted); line-height: 1.65; }

@media (max-width: 700px) {
  .topic-formats { grid-template-columns: 1fr; }
}

/* The link out of the landing page's demo section to the page above. */
.demo-more {
  margin: 16px 0 0;
  text-align: center;
  font-size: 0.95rem;
}

.demo-more a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

.demo-more a:hover { text-decoration: underline; }

/* The e-invoicing card's way to the page that explains it in full. The same
   brand link as the demo section's, set at the foot of a card. */
/* `.feature p` sets margin 0 and outranks the bare class. */
.feature .feature-more { margin: 12px 0 0; font-size: 0.92rem; }
.feature-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.feature-more a:hover { text-decoration: underline; }
.feature-more svg { width: 15px; height: 15px; }
.demo-more svg { width: 16px; height: 16px; }
.demo-length { color: var(--ink-faint); font-weight: 400; }