/* 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);
  background: var(--surface);
  padding: 14px;
  box-shadow: 0 12px 30px rgba(16, 24, 40, 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: #fff; 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; }

/* --- 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);
}
/* The one the table steers towards. A ring rather than a scale transform: the
   card is in a row of four with `align-items: stretch`, and lifting one of them
   breaks the line the four bottoms sit on. */
.price-card.is-recommended {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 6px 18px rgb(47 96 148 / 0.10);
}

.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;
}

.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 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 -----------------------------------------------------
   Three columns above the copyright line: who we are, what we publish, how to
   reach us. All three are checklist items, and a footer is where a customer
   looks for them without being told to. */
.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 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; }
  .footer-main { grid-template-columns: 1fr; gap: 26px; padding: 32px 20px 8px; }
  .legal { padding: 32px 16px 48px; }
  .legal-head h1 { font-size: 1.7rem; }
}