/* The landing page only. Loaded by core/landing.html and nowhere else, so the
   rest of the product does not carry the weight of a page it never renders.
   Tokens come from main.css, which is loaded first. */

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 48px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 28px 64px;
}
.landing-hero h1 {
  font-size: 2.9rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.lede { font-size: 1.08rem; color: var(--ink-muted); max-width: 54ch; }

.landing-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 14px; }
/* The reassurance line under the buttons: a tick, then the words, not a tick
   welded to the first one. */
.landing-hero-text .tiny { display: flex; align-items: center; gap: 7px; }
.landing-hero-text .tiny .icon { color: var(--ok); }
.landing-actions.center { justify-content: center; }
.landing-actions .btn { min-height: 46px; }
.btn-lg { padding: 12px 22px; font-size: 0.96rem; }
.landing-actions .btn .icon,
.landing-actions .btn-primary .icon,
.landing-actions .btn .svg-icon,
.landing-actions .btn-primary .svg-icon { color: currentColor; }

/* The card and its caption both sit against the right edge of the hero, so the
   block ends where the page's right margin does rather than floating in the
   middle of its column. */
.landing-hero-visual { display: flex; flex-direction: column; align-items: flex-end; }
.landing-hero-visual img {
  width: 260px; height: 260px; max-width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  /* Paper, not the card: the hero picture is a working code and needs a light
     quiet zone in either theme. See `.landing-demo img` below. */
  background: var(--paper);
  padding: 14px;
  box-shadow: 0 12px 30px rgb(var(--shadow-rgb) / 0.10);
}
/* The caption is given the card's own width, so it centres under the card
   rather than under the column the card is pushed to the end of. */
.landing-hero-visual p {
  width: 260px; max-width: 100%;
  margin-top: 12px;
  text-align: center;
}

/* --- The builder, on the page ------------------------------------------------
   Directly under the hero and always open. The width matches the sections
   below it so the page reads as one column, not as a form someone dropped in
   the middle of a marketing page. */
.landing-build { max-width: 1120px; margin: 0 auto; }
.landing-build-note {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-bottom: 18px;
}
.landing-build-note .icon { color: var(--ok); }

.landing-section { padding: 62px 28px; }
.landing-tinted { background: var(--surface); border-block: 1px solid var(--line); }
.landing-inner { max-width: 1120px; margin: 0 auto; }
.landing-inner.center { text-align: center; }

.landing-head { margin-bottom: 30px; }
.landing-head h2 { font-size: 1.7rem; letter-spacing: -0.01em; margin-bottom: 8px; }
.landing-inner.center .lede { margin-inline: auto; }

/* Every content type, straight from the builder's registry. The point of the
   section is the count and the icons - the reader is looking for their own
   use case in the list, not reading it top to bottom. */
.landing-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px; list-style: none; margin: 0; padding: 0;
}
.landing-types li {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; font-size: 0.92rem;
  background: var(--canvas);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.landing-type-mark { display: inline-flex; font-size: 1.15rem; color: var(--brand); }

.landing-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap); list-style: none; margin: 0; padding: 0; counter-reset: step;
}
.landing-steps li {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
}
/* The number, the icon and the title on one line, for the same reason. */
.landing-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.landing-steps h3 { display: flex; align-items: center; gap: 9px; margin: 0; }
.landing-steps h3 .icon { color: var(--brand); }
.landing-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: 0.9rem;
}

.landing-features {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap);
}
.landing-feature {
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
/* The mark and the headline on one line. Stacked, each card spent a row on a
   40px square and pushed the sentence that does the work further down the page;
   inline, the eye reads mark-then-title as one thing. */
.landing-feature-head { display: flex; align-items: center; gap: 12px; }
.landing-feature h3 { font-size: 1rem; margin: 0; }
.landing-feature p { margin: 10px 0 0; }
.landing-feature-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--brand-light); color: var(--brand); font-size: 1.2rem;
}

/* --- The menus section ------------------------------------------------------
   Copy on the left, the photograph on the right, and the two swap to one column
   on a narrow screen with the picture underneath - a phone showing a picture of
   a phone above the sentence explaining it is a riddle. */
.landing-menus { background: var(--surface); }
.landing-menus-inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px; align-items: center;
}
.landing-menus h2 { font-size: 1.9rem; margin: 6px 0 10px; }
.landing-eyebrow {
  margin: 0; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--brand);
}
.landing-points { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 14px; }
.landing-points li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; }
.landing-points .icon {
  flex: none; margin-top: 0.15em; width: 20px; height: 20px; color: var(--brand);
}
.landing-points strong { display: block; }
.landing-menus-shot img { display: block; width: 100%; height: auto; }

/* The example menu: a code to scan and the same address as a link, in one card.
   A card rather than a bare image because the code has to read as something to
   *use* - a QR code loose on a page is decoration, and nobody points a phone at
   decoration. It is a link end to end, so the tap target is the whole thing
   rather than the 148px square.

   Styled the way `.stat` is in main.css, which is this project's answer to "a
   card that is a link": the page's ink rather than the link colour, and a lift
   instead of an underline. `a:hover` underlines every link on the site, which
   on a card means a line under the label and another under the note - so it is
   turned off here, and the border, the lift and the arrow are the hover state.
   It behaves like the buttons under it: it presses when clicked, and it takes
   the same focus ring. */
.landing-demo {
  display: inline-flex; align-items: center; gap: 18px;
  margin: 4px 0 24px; padding: 14px 20px 14px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--brand-tint), var(--surface) 70%);
  color: inherit; text-decoration: none; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.landing-demo:hover { text-decoration: none; }
.landing-demo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgb(var(--shadow-rgb) / 0.08);
  border-color: var(--brand);
}
/* Pressed, not lifted. Without this the card springs *up* under a finger that
   is pushing down on it, which is the one moment a link stops feeling like a
   button. */
.landing-demo:active { transform: translateY(0); box-shadow: none; }
.landing-demo:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* White behind the code and a hairline around it: a QR code is thresholded into
   light and dark before anything reads it, so the tinted card it sits on cannot
   be its quiet zone. */
/* `--paper`, and it is not themed - see the paper tokens in main.css. A QR code
   is thresholded into light and dark before anything reads it, so the quiet
   zone around it has to be light whatever the rest of the page is doing. This
   is the one rule on the page that a dark theme must not touch. */
.landing-demo img {
  flex: none; width: 148px; height: 148px;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--paper); padding: 8px;
}
.landing-demo-text { display: grid; gap: 5px; }
/* The label carries the brand colour and the arrow, so the card says which part
   of it is the thing being followed - the rest of it is ink, as on `.stat`. */
.landing-demo-text strong { display: flex; align-items: center; gap: 8px; color: var(--brand); }
.landing-demo-text .icon { width: 15px; height: 15px; transition: transform 0.18s ease; }
/* The address, set apart from the sentence above it by a rule rather than by
   more space: it is not another line of prose, it is the thing you would type. */
.landing-demo-url {
  margin-top: 3px; padding-top: 7px;
  border-top: 1px solid var(--line);
  color: var(--ink-muted); word-break: break-all;
}
/* The arrow leans out of the card on hover: the whole card is the link, and this
   is the cheapest way to say which direction following it goes. */
.landing-demo:hover .icon { transform: translate(2px, -2px); }

/* --- Prices, on the public page ----------------------------------------------
   Four compact cards. Deliberately lighter than the signed-in plan page's: that
   one is a decision between tiers, this one is an answer to "what does it
   cost", and it is passed on the way down the page rather than studied. */
/* `.landing-inner.center` centres a lede by giving it auto margins; this head
   is centred without the whole column being, so it needs the same rule. */
.landing-head.center { margin-bottom: 24px; }
.landing-head.center .lede { margin-inline: auto; }

/* The switch is a column above the grid so it centres over it. Same shape the
   plan page uses; the rule is repeated here because that one is scoped to
   `.plan-page`, which is a class on the signed-in shell's content column. */
.landing-tinted .plan-periods { display: flex; flex-direction: column; align-items: center; }
.landing-tinted .plan-periods > .pricing-grid { width: 100%; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* Each card is a tier with its own button, so it answers to the pointer the way
   `.plan-card` does on the signed-in plan page - same lift, same shadow, same
   easing. The two pricing tables are already held to the same *contents* by
   `_plan_features.html`; behaving differently under the pointer was the last
   way they still read as two different tables.

   Note this is not in tension with the ring below it. A momentary lift is what
   the pointer is over right now; the recommended card's mark is permanent, and
   permanently raising one card in a row of four is what would break the line
   the four bottoms sit on. */
.price-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: 0 10px 24px rgb(var(--shadow-rgb) / 0.09);
}
/* The one the table steers towards. A ring rather than a scale transform, for
   the reason above. It keeps the ring while hovered and takes the lift's shadow
   under it - without restating it here the ring's own `box-shadow` wins and the
   one card the table argues for is the one that does not respond. */
.price-card.is-recommended {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 6px 18px color-mix(in srgb, var(--brand) 10%, transparent);
}
.price-card.is-recommended:hover {
  box-shadow: 0 0 0 1px var(--brand), 0 10px 24px rgb(var(--shadow-rgb) / 0.09);
}

.price-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.price-head h3 { font-size: 0.95rem; margin: 0; }

.price { font-size: 1.5rem; font-weight: 650; line-height: 1.2; }
.price-per { font-size: 0.78rem; font-weight: 500; color: var(--ink-muted); margin-left: 3px; }
/* The euro restatement, under the figure rather than beside it: the mark price
   is what is charged and has to stay the largest thing in the card. */
/* `min-height`, because two of the four tiers have no euro figure - Free is
   priced at nothing and Enterprise says "contact us" - and without the slot
   being held open their feature lists started a line above the other two. */
.price-eur {
  font-size: 0.76rem; font-weight: 500; color: var(--ink-faint);
  margin-top: -8px; min-height: 1.15em;
}

/* The shared feature list (core/_plan_features.html) inside a price card.
   `flex: 1` so the four lists absorb the slack in a short card and the button
   below them lands on the same line in all four. The rows are unruled here -
   the plan page draws a line between them, which is right in a wide table and
   too busy in a 260px card. */
.price-card .plan-features {
  margin: 4px 0 0; flex: 1;
  display: grid; gap: 0; align-content: start;
  font-size: 0.84rem;
}
.price-card .plan-features li { padding: 5px 0; border-bottom: none; }

/* The pay-terms block is `core/_pay_terms.html` and styles itself in main.css,
   which both pages load. Here it sits on the tinted band, so the two grounds
   swap: the block takes the same grey as the price cards above it, and the
   callout inside it goes white. Left as it is elsewhere, brand-tint on canvas
   is barely a shade apart and the callout showed as a left rule and nothing
   else. */
.landing-tinted .pay-terms { margin-top: 30px; }

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pricing-grid { grid-template-columns: minmax(0, 1fr); }
}

.landing-closing { background: var(--brand-tint); }
.landing-closing h2 { font-size: 1.9rem; margin-bottom: 10px; }

/* --- 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 merchant
   application, and neither is helped by a page-wide measure. */
.legal { max-width: 780px; margin: 0 auto; padding: 48px 24px 64px; }

.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 that an anchored jump does not leave the
   heading against the very top of the window. */
.legal-section {
  padding-top: 26px; margin-top: 26px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 24px;
}
.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; }
.legal .card-marks { margin: 14px 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); margin-bottom: 12px;
}

/* `.footer-nav` is the Resources column and rides along with these rules rather
   than copying them: it is the same row of icon-and-label links, and the two
   lists sit side by side in the footer where any drift between them shows. */
.legal-nav, .footer-nav {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.88rem;
}
.legal-nav li, .footer-nav li { display: inline-flex; }
.legal-nav a, .legal-nav .is-current,
.footer-nav a { display: inline-flex; align-items: center; gap: 7px; }
.legal-nav .icon, .footer-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 it 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; }

/* --- The merchant footer -----------------------------------------------------
   Four columns above the copyright line: who we are, what we publish, what we
   have written, how to reach us. The first, second and fourth are checklist
   items, and a footer is where a customer looks for them without being told
   to. Resources is the third because it is the one column that is ours rather
   than the acquirer's, and it must not push the other three around. */
.landing-footer { background: var(--surface); border-top: 1px solid var(--line); }

.footer-main {
  max-width: 1120px; margin: 0 auto; padding: 40px 28px 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; }
/* The brand mark only. Written as a bare `img` this also caught the three card
   acceptance marks in the column beside it and drew each of them 150px wide,
   which is both wrong and, for a scheme mark, not permitted. */
.footer-brand .brand-logo { width: 150px; height: auto; 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); }

/* 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 reads as two stray scraps rather than as a footer. So
   the fold is made explicit below the width where the two stop sharing a line -
   the currency notice is the longer of them in German, and it is what runs out
   of room first. */
.footer-base {
  max-width: 1120px; margin: 0 auto; padding: 24px 28px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px 16px; flex-wrap: wrap;
  font-size: 0.86rem; color: var(--ink-muted);
}
.footer-base a { color: var(--ink-muted); }
.footer-base a:hover { color: var(--brand); }

@media (max-width: 860px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .footer-base { flex-direction: column; justify-content: center; text-align: center; }
}

/* The hero stacks first, because its two halves are the widest thing here;
   the card grids follow at the widths where their columns stop fitting. */
@media (max-width: 900px) {
  .landing-hero { grid-template-columns: minmax(0, 1fr); padding-top: 48px; gap: 32px; }
  .landing-hero h1 { font-size: 2.2rem; }
  /* Stacked, there is no right-hand column to sit against - the card is the
     full width of the page, so it centres instead. */
  .landing-hero-visual { order: -1; align-items: center; }
  .landing-menus-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .landing-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .landing-section { padding: 44px 20px; }
  .landing-features { grid-template-columns: minmax(0, 1fr); }
  .landing-actions { flex-direction: column; }
  .landing-actions .btn { width: 100%; justify-content: center; }
  /* The example-menu card gives up its row here: 120px of code beside two
     lines of text leaves the text a column too narrow to read. The code stays
     the same size - it is scanned at that size, and shrinking it is how a
     printed code stops reading. */
  .landing-demo { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
  .footer-main { grid-template-columns: 1fr; gap: 26px; padding: 32px 20px 8px; }
  .legal { padding: 32px 16px 48px; }
  .legal-head h1 { font-size: 1.7rem; }
}

/* --- "QR codes on…" ---------------------------------------------------------
   The tiles are a grid of pictures, and the pictures are the page. Two things
   are doing work here and neither is decoration:

   * `aspect-ratio` on the image with a reserved box, so six pictures loading
     do not shove the headings around underneath a reader who has started
     reading. Every picture on this page is made square, so the ratio is a
     fact about the asset rather than a crop - and it has to stay one. Set a
     ratio the art is not and the image is *squashed* rather than cropped,
     because a width and an `aspect-ratio` together are two lengths and
     `height: auto` has nothing left to decide;
   * a floor of 360px on the column, which is what holds the grid to two
     columns at full width rather than three. That is not a taste decision.
     It is what the codes need to survive being looked at on this page:
     `zbarimg` reads the table tent and the poster off a 356px render and off
     a 547px one, so two columns are comfortable and three are the edge. The
     business card is the counter-example and the reason the floor is not
     lowered - a vCard is a lot of data in a code printed small, and it needs
     640px of render before it decodes at all. Widening the tiles is half of
     it; the other half is drawing the code large inside the picture. */
.usecases-head { padding-bottom: 34px; }
.usecases-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 6px 0 12px; }
.usecases-note {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 22px; padding: 10px 16px;
  background: var(--brand-tint); border: 1px solid var(--brand-light);
  border-radius: 999px;
  font-size: 0.86rem; color: var(--brand-dark);
}
.usecases-note .icon { font-size: 1rem; flex: none; }

.usecase-grid {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}
.usecase {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.usecase img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}
.usecase figcaption { padding: 18px 20px 22px; }
.usecase h2 { font-size: 1.05rem; margin-bottom: 7px; }
.usecase p { font-size: 0.9rem; color: var(--ink-muted); margin: 0; }

.usecases-closing { text-align: center; }
.usecases-closing .lede { margin: 10px auto 0; }
.usecases-closing .landing-actions { justify-content: center; }