/* Shared MyPay foundations. Page composition lives in the route stylesheets. */
:root {
  --mypay-ink: #20231f;
  --mypay-muted: #65675f;
  --mypay-orange: #ff5b1f;
  --mypay-paper: #f4f3ef;
  --mypay-line: #dedfd8;
  --mypay-dark: #212720;
  --mypay-gutter: 56px;
  --mypay-display: clamp(3.75rem, calc(7.2vw - 1.25rem), 6rem);
  --mypay-section: clamp(2.6rem, 4.75vw, 4.5rem);
  --mypay-chapter: clamp(2rem, 3.25vw, 3rem);
  --mypay-panel: 2rem;
  --mypay-label: .875rem;
  --mypay-body: 1rem;
  --mypay-section-space: 96px;
  --mypay-ease: cubic-bezier(.2,.7,.2,1);
}
.header .primary-navigation { gap: 25px; }
.in-wrap { width: min(calc(100% - var(--mypay-gutter) * 2), 1328px); margin-inline: auto; }
.in-page h1 {
  font-size: var(--mypay-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.in-page h2 { font-size: var(--mypay-section); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.in-page h3 { font-weight: 500; }
.in-page .in-copy > p:not(.in-eyebrow),
.in-page .in-section-head > p,
.in-page .in-lead { font-size: var(--mypay-body); line-height: 1.65; }
.in-page p.in-eyebrow { font-size: .75rem; letter-spacing: .1em; line-height: 1.6; }
.in-page .in-link { font-size: .9375rem; }
.in-page .in-button { font-size: 1rem; font-weight: 600; } /* CTA label role, design.md §9 */
.in-page .in-button { min-height: 54px; padding: 14px 24px; }
.in-page .in-actions { margin-top: 28px; }
.in-page .ip-world .in-copy h3,
.in-page .it-scene .in-copy h3,
.in-page .ii-scene .in-copy h3,
.in-page .ih-step .in-copy h2 { font-size: var(--mypay-chapter); letter-spacing: -.04em; line-height: 1.12; }
.in-page .is-guide h2 { font-size: var(--mypay-panel); letter-spacing: -.035em; line-height: 1.15; }
.in-page .ic-wallet h2, .in-page .it-end h2, .in-page .ih-after h2 { font-size: var(--mypay-chapter); }
.in-page .is-guide > p:not(.in-eyebrow), .in-page .ih-responsibility p,
.in-page .ih-launch p, .in-page .ii-compare p { font-size: var(--mypay-body); line-height: 1.65; }
.in-page .is-guide li,
.in-page .ih-jump a, .in-page .ih-choices p { font-size: var(--mypay-label); }
.in-page .in-copy > p:not(.in-eyebrow) { margin-top: 24px; }
.in-page .in-section-head { gap: 48px; margin-bottom: 40px; }
.in-page .in-section-head > div { flex: 1; }
.in-page .in-section-head > p { flex: 0 1 330px; }

/* The homepage ending is the single footer on every route. */
.lp-finale {
  display: block; background: var(--mypay-dark); color: #f8f7f2;
  padding: 0; border-radius: 28px 28px 0 0; overflow: hidden;
}
.lp-finale .lp-wrap { width: min(calc(100% - var(--mypay-gutter) * 2), 1328px); margin-inline: auto; }
.lp-finale a:focus-visible { outline: 3px solid #ff9c72; outline-offset: 5px; }
.lp-finale-invitation { display: grid; grid-template-columns: 1.15fr 1fr; gap: 9%; align-items: end; padding-block: 77px; }
.lp-finale-title .lp-eyebrow { color: #b9b9ae; font-size: .75rem; font-weight: 500; letter-spacing: .06em; line-height: 1.6; margin-bottom: 30px; }
.lp-finale-title h2 { font-size: clamp(4.5rem,9vw,8rem); font-weight: 500; line-height: 1.01; letter-spacing: -.055em; }
.lp-finale-title h2 > span { display: block; padding-bottom: .07em; }
.lp-finale-title em { font-style: normal; color: #ff976b; }
.lp-finale-action { padding-bottom: 9px; }
.lp-finale-action > p { font-size: 1.125rem; line-height: 1.75; color: #c8c8bd; max-width: 365px; }
.lp-finale-cta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 78px; margin-top: 31px; padding: 16px 20px 16px 26px; border-radius: 6px; overflow: hidden; isolation: isolate; background: #ff9c72; color: #26231e; font-size: 1.25rem; font-weight: 500; }
.lp-finale-cta::before { content: ''; position: absolute; inset: 0; background: #fff5ed; transform: translateY(102%); transition: transform .4s var(--mypay-ease); z-index: -1; }
.lp-finale-cta:hover::before { transform: none; }
.lp-finale-arrow { display: grid; place-items: center; width: 42px; height: 42px; flex: none; }
.lp-finale-arrow svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lp-finale-customers { display: flex; align-items: center; gap: 50px; padding: 23px 0; border-block: 1px solid #626258; }
.lp-finale-customers > span { color: #adad9f; font-size: .875rem; margin-right: auto; }
.lp-finale-customers > a { display: flex; align-items: center; gap: 25px; min-height: 44px; font-size: 1rem; color: #f3f3eb; }
.lp-finale-customers > a span { color: #ffad87; }
.lp-finale-navigation { position: relative; display: grid; grid-template-columns: 1fr 1.35fr .85fr; gap: 65px; padding: 48px 60px 48px 0; }
.lp-finale-brand img { width: 128px; height: auto; filter: grayscale(1) brightness(0) invert(1); }
.lp-finale-brand p { font-size: 1rem; line-height: 1.7; margin-top: 24px; color: #deded3; }
.lp-finale-brand > span { display: block; font-size: .75rem; color: #aead9f; margin-top: 26px; line-height: 1.6; }
.lp-finale nav h3 { font-size: .875rem; line-height: 1.5; font-weight: 400; color: #b7b7a9; margin-bottom: 16px; letter-spacing: 0; }
.lp-finale nav > a { display: flex; align-items: center; flex-wrap: wrap; column-gap: 7px; min-height: 43px; font-size: .9375rem; line-height: 1.5; color: #e7e7dc; width: fit-content; }
.lp-finale nav > a:hover, .lp-finale-customers > a:hover { color: #ffb492; }
.lp-finale nav > a[aria-current="page"] { color: #ffb492; }
.lp-finale nav small { color: #aaa99b; font-size: .75rem; }
.lp-finale-products { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-content: start; }
.lp-finale-products h3 { grid-column: 1 / -1; }
.lp-finale-top { position: absolute; right: 0; top: 54px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #777568; color: #d6d5c7; }
.lp-finale-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lp-finale-top:hover { background: #ff976b; color: #242421; }
.lp-finale-legal { display: flex; align-items: end; justify-content: space-between; gap: 60px; border-top: 1px solid #535348; padding: 24px 0 29px; }
.lp-finale-legal > p { font-size: .75rem; line-height: 1.8; color: #b3b2a6; max-width: 790px; }
.lp-finale-legal > span { font-size: .75rem; color: #b3b2a6; white-space: nowrap; }

@media (max-width: 1279px) { :root { --mypay-display: clamp(3.5rem,6.6vw,5.25rem); } }
@media (max-width: 1150px) {
  :root { --mypay-gutter: 36px; --mypay-section-space: 72px; }
  .lp-finale-navigation { gap: 36px; grid-template-columns: .85fr 1.4fr .8fr; }
}
@media (max-width: 850px) {
  .lp-finale-title h2 { font-size: 4.75rem; }
  .lp-finale-invitation { gap: 45px; }
  .lp-finale-navigation { grid-template-columns: .85fr 1.3fr .8fr; gap: 28px; }
  .in-page .in-section-head { gap: 32px; }
}
@media (max-width: 767px) { :root { --mypay-display: clamp(3.3rem,8.5vw,4rem); } }
@media (max-width: 760px) {
  :root { --mypay-gutter: 24px; }
  .lp-finale-invitation { display: block; padding: 43px 0 35px; }
  .lp-finale-action { margin-top: 24px; padding: 0; }
  .lp-finale-action > p { font-size: 1rem; max-width: 350px; }
  .lp-finale-cta { margin-top: 25px; font-size: 1.125rem; min-height: 72px; padding: 15px 18px 15px 23px; }
  .lp-finale-customers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; padding: 21px 0; }
  .lp-finale-customers > span { grid-column: 1 / -1; font-size: .875rem; }
  .lp-finale-customers > a { font-size: .875rem; gap: 12px; justify-content: space-between; }
  .lp-finale-navigation { grid-template-columns: 1fr; gap: 32px; padding: 36px 0; }
  .lp-finale-brand { display: block; padding-right: 60px; }
  .lp-finale-brand p { margin-top: 20px; font-size: .875rem; }
  .lp-finale-brand > span { margin: 17px 0 0; }
  .lp-finale-brand img { width: 124px; }
  .lp-finale-top { top: 36px; }
  .lp-finale nav h3 { margin-bottom: 11px; }
  .lp-finale-company { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .lp-finale-company h3 { grid-column: 1 / -1; }
  .lp-finale nav > a { min-height: 44px; font-size: .875rem; }
  .lp-finale-legal { display: block; padding: 22px 0 27px; }
  .lp-finale-legal > span { display: block; margin-top: 20px; }
}
@media (max-width: 620px) {
  :root { --mypay-gutter: 20px; --mypay-display: clamp(2.5rem,12.2vw,4rem); --mypay-section: clamp(2.15rem,9vw,3rem); --mypay-chapter: 1.875rem; --mypay-panel: 1.75rem; --mypay-section-space: 56px; }
  .in-page h1 { line-height: 1.05; letter-spacing: -.045em; }
  .in-page .in-section-head { display: block; margin-bottom: 32px; }
  .in-page .in-section-head > p { margin-top: 22px; }
  .lp-finale-invitation { padding: 46px 0 36px; }
  .lp-finale-title h2 { font-size: clamp(3.65rem,16vw,5.5rem); }
  .lp-finale-title .lp-eyebrow { margin-bottom: 26px; }
  .lp-finale-action { margin-top: 22px; }
}
@media (max-width: 359px) { :root { --mypay-gutter: 17px; } }
@media (prefers-reduced-motion: reduce) { .lp-finale * { transition: none !important; animation: none !important; } }

/* Center the navigation independently of the unequal logo and action groups. */
@media (min-width: 1100px) {
 .site-page .header { height: 88px; margin: 0; padding-inline: clamp(28px,4vw,72px); align-items: center; border: 0; background: #fff; }
 .site-page .header .primary-navigation { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0; gap: 24px; line-height: 1.4; }
 .site-page .header .header-actions { margin-left: auto; align-items: center; gap: 12px; line-height: 1.4; }
 .site-page .header .products-menu { left: 50%; top: calc(100% + 21px); transform: translateX(-50%); width: 680px; }
}
@media (min-width: 1100px) and (max-width: 1499px) {
 .site-page .header { gap: 12px; }
 .site-page .header .primary-navigation { gap: 20px; }
 .site-page .header .header-actions { gap: 8px; }
 .site-page .header .lp-cta-pair { gap: 8px; }
 .site-page .header .lp-cta { padding-inline: 14px; font-size: 14px; min-height: 46px; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
 .site-page .header { padding-inline: 28px; gap: 8px; }
 .site-page .header .primary-navigation { gap: 16px; font-size: 13px; }
 .site-page .header .lp-cta { padding-inline: 10px; font-size: 13px; }
 .site-page .header > .language-switch { min-width: 44px; }
}

@media (min-width: 1100px) and (max-width: 1359px) { .site-page .header .header-actions > .mini-pill { display: none; } }
@media (min-width: 1200px) and (max-width: 1399px) { html[lang="el"] .site-page .header .header-actions > .mini-pill { display: none; } }

@media (min-width: 1100px) {
 .header .lp-cta-mobile { display: none; }
 .header .lp-cta-pair { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
 :is(.header, .ip-hero, .iw-hero) .lp-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 13px 20px; border: 1px solid var(--cta-border, transparent); border-radius: 999px; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
 :is(.header, .ip-hero, .iw-hero) .lp-cta-primary { background: var(--mypay-ink); color: #fff; }
 :is(.header, .ip-hero, .iw-hero) .lp-cta-primary:hover { background: #363a33; }
 :is(.header, .ip-hero, .iw-hero) .lp-cta-secondary { background: #f4f4f2; color: var(--mypay-ink); }
 :is(.header, .ip-hero, .iw-hero) .lp-cta-secondary:hover { background: #e9eae6; }
 :is(.header, .ip-hero, .iw-hero) .lp-cta:focus-visible { outline: 3px solid #ff5b1f; outline-offset: 4px; }
 .header .header-actions > .lp-cta-pair { order: -1; }
}

html { scrollbar-gutter: stable; }

/* Greek labels need a wider action lane. Reserve it before the landing
   handoff so revealing the CTAs never collides with the centered navigation. */
@media (min-width: 1100px) and (max-width: 1699px) {
 html[lang="el"] .site-page .header .header-actions > .mini-pill { display: none; }
 html[lang="el"] .site-page .header { gap: 12px; }
 html[lang="el"] .site-page .header .primary-navigation { gap: 18px; font-size: 14px; }
 html[lang="el"] .site-page .header .header-actions { gap: 8px; flex-shrink: 0; }
 html[lang="el"] .site-page .header .lp-cta-pair { gap: 8px; }
 html[lang="el"] .site-page .header .lp-cta { min-height: 46px; padding: 11px 14px; font-size: 14px; line-height: 1.5; }
 html[lang="el"] .site-page .header > .language-switch { min-width: 44px; }
}
@media (min-width: 1100px) and (max-width: 1249px) {
 html[lang="el"] .site-page .header { padding-inline: 24px; gap: 8px; }
 html[lang="el"] .site-page .header .primary-navigation { gap: 12px; font-size: 13px; }
 html[lang="el"] .site-page .header .lp-cta { padding-inline: 9px; font-size: 13px; }
}

/* The footer is a deliberate ending: its invitation rises as it enters the viewport.
   Scroll-driven, transform/opacity only, no layout shift; browsers without view() show it static. */
@supports (animation-timeline: view()) {
  .lp-finale-invitation > * { animation: lp-finale-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
}
@keyframes lp-finale-rise { from { opacity: .001; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .lp-finale { border-radius: 20px 20px 0 0; } }

/* No cross-document view transition: after a menu navigation from the landing page it left the next
   page's scrolling briefly stuck (2026-09-18). Pages change with a plain navigation. */
@media (prefers-reduced-motion: reduce) {
  .lp-finale-invitation > * { animation: none !important; }
}

/* Closing invitation: the landing's CTA pair on every route (mobile styles live in mobile.css). */
@media (min-width: 1100px) {
  .lp-finale .lp-cta-mobile { display: none; }
  .lp-finale .lp-cta-pair { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; margin-top: 0; }
  .lp-finale .lp-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 13px 20px; border: 1px solid transparent; border-radius: 999px; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.5; letter-spacing: 0; white-space: nowrap; text-decoration: none; box-shadow: none; transition: background-color 150ms ease, color 150ms ease; }
  .lp-finale .lp-cta::before, .lp-finale .lp-cta::after { display: none; }
  :is(.lp-finale, .iw-hero) .lp-cta-primary { background: #fff; color: var(--mypay-ink); }
  :is(.lp-finale, .iw-hero) .lp-cta-primary:hover { background: #e9eae6; }
  :is(.lp-finale, .iw-hero) .lp-cta-secondary { background: transparent; color: #fff; border-color: #777b71; }
  :is(.lp-finale, .iw-hero) .lp-cta-secondary:hover { background: #363a33; }
  .lp-finale .lp-cta:focus-visible { outline: 3px solid #ff9c72; outline-offset: 4px; }
}
@media (prefers-reduced-motion: reduce) { .lp-finale .lp-cta { transition: none; } }

/* CTA label role on phones (design.md §9): 14px. */
@media (max-width: 767px) { .in-page .in-button { font-size: .875rem; } }

/* Greek type on every route follows the approved Greek landing (greek-landing.css is the reference):
   smaller display roles for longer words, tighter eyebrow tracking, its line heights. Layout stays per page. */
html[lang="el"] :is(.in-page, .detail-page, .ec-page) h1 { font-size: clamp(3.3rem, 5.45vw, 5.25rem); line-height: 1.15; letter-spacing: -.032em; }
html[lang="el"] :is(.in-page, .detail-page, .ec-page) :is(h2, h3) { text-wrap: balance; }
html[lang="el"] :is(.in-page, .detail-page, .ec-page) h2 { letter-spacing: -.03em; line-height: 1.16; }
html[lang="el"] :is(.in-page, .detail-page, .ec-page) h3 { letter-spacing: -.02em; line-height: 1.22; }
html[lang="el"] :is(.in-eyebrow, .kicker, .ec-kicker, .depth-label) { letter-spacing: .025em; line-height: 1.6; }
html[lang="el"] .lp-finale-title h2 { font-size: clamp(3.5rem, 6.6vw, 6rem); letter-spacing: -.03em; line-height: 1.16; }
html[lang="el"] :is(.in-lead, .ec-body) { letter-spacing: 0; line-height: 1.65; }
@media (min-width: 1200px) { html[lang="el"] :is(.in-page, .detail-page, .ec-page) h1 { font-size: clamp(3.125rem, 4.6vw, 4.75rem); } }
@media (min-width: 621px) and (max-width: 1199px) { html[lang="el"] :is(.in-page, .detail-page, .ec-page) h1 { font-size: clamp(3.1rem, 6.3vw, 4.5rem); } }
@media (max-width: 620px) {
  html[lang="el"] :is(.in-page, .detail-page, .ec-page) h1 { font-size: clamp(1.875rem, 10.35vw, 2.8rem); line-height: 1.13; }
  html[lang="el"] :is(.in-page, .detail-page, .ec-page) h2:not(.is-guide h2, .cookie-policy h2, .quote-card h2) { font-size: clamp(1.85rem, 8.25vw, 2.4rem); } /* section titles only; panel and legal roles keep their own phone sizes */
  html[lang="el"] :is(.in-eyebrow, .kicker, .ec-kicker, .depth-label) { font-size: 11px; }
  html[lang="el"] .lp-finale-title h2 { font-size: clamp(2.1rem, 9.6vw, 2.8rem); }
}

/* Shared outline action for existing merchants; keep the centred nav and sales lane intact. */
.lp-cta-outline{--cta-border:var(--mypay-ink);color:var(--mypay-ink);background:transparent;gap:8px}
.lp-cta-outline:hover{background:var(--mypay-paper)}
/* Log in closes the action lane as a plain link, after the CTA pair. */
/* The bar's one button: small and dark, before the plain Log in — smaller than the page opening's pair below it, so the two never compete. */
@media(min-width:1100px){.site-page .header .header-actions{gap:20px}.header .header-actions .header-sales{display:inline-flex;align-items:center;min-height:40px;padding:8px 18px;border-radius:999px;background:var(--mypay-ink);color:#fff;font-size:14px;font-weight:600;line-height:1.5;white-space:nowrap}.header .header-actions .header-sales:hover{background:#363a33}.header .header-actions .header-sales:focus-visible{outline:3px solid #ff5b1f;outline-offset:3px}}
@media(min-width:1100px){.header .header-actions>.header-sign-in{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;padding-inline:8px;white-space:nowrap}.header .header-actions>.header-sign-in:hover{color:#b7380d}.header .header-actions>.header-sign-in:focus-visible{outline:3px solid #ff5b1f;outline-offset:2px;border-radius:8px}}
@media(max-width:1099px){.mobile-menu-actions>.lp-cta-outline{width:100%;margin-bottom:10px}}

/* Numbered feature rows, shared by product benefits and the company chapter. */
.mp-feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 56px;list-style:none;margin:0;padding:0}.mp-feature{min-width:0;border-top:1px solid var(--mypay-line);padding-top:24px}.mp-feature-index{display:block;margin-bottom:16px;color:#ad350d;font-size:.75rem;line-height:1.6;font-weight:500;letter-spacing:.04em}.mp-feature h3{margin:0;font-size:clamp(1.375rem,2vw,1.75rem);font-weight:500;line-height:1.25;letter-spacing:-.03em}.mp-feature p{font-size:1rem;line-height:1.65;color:var(--mypay-muted);margin:12px 0 0;max-width:34em}
@media(max-width:620px){.mp-feature-list{grid-template-columns:1fr;gap:24px}.mp-feature{padding-top:20px}.mp-feature-index{margin-bottom:10px}}

/* Header navigation starts beside the logo on every page, landing included (Giorgos, 20 Sep 2026): a menu centred in
   the window ran into the action lane once Solutions joined it. The lane holds Contact sales and Log in. */
@media(min-width:1100px){
 .site-page .header>a:first-child{margin-right:clamp(16px,2.6vw,48px)}
 .site-page .header .primary-navigation{position:relative;top:auto;left:auto;transform:none;margin:0 auto 0 0}
}
/* PRO-276: WhatsApp + call buttons — footer pair (outline, on the dark footer). The phone bar is in mobile.css. */
.reach-bar { display: none; }
.reach-footer { margin-top: 30px; }
.reach-footer h3 { font-size: .875rem; line-height: 1.5; font-weight: 400; color: #b7b7a9; margin-bottom: 14px; letter-spacing: 0; }
.reach-pair { display: flex; flex-wrap: wrap; gap: 10px; }
.reach-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 18px; border: 1px solid #777568; border-radius: 999px; color: #f3f2ea; font-size: .875rem; font-weight: 600; line-height: 1.4; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.reach-button svg { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.reach-button:hover { background: #ff976b; border-color: #ff976b; color: #242421; }
.reach-button:focus-visible { outline: 2px solid #ff976b; outline-offset: 3px; }

/* The MyPay app (PRO-277): store badges and the QR code — Business Account section, shared footer, support, /app/.
   Badges are the official artwork, never recoloured; only the transparent padding around Google's PNG is trimmed,
   so both badges share one height (44 px, 40 px in the footer, 48 px on phones) and the gap gives the clear space. */
.app-badges{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.app-badges a{display:block;line-height:0;border-radius:8px}
.app-badges a:focus-visible{outline:3px solid #ff5b1f;outline-offset:3px}
.app-badges img{display:block;width:auto;max-width:none;height:44px}
.iw-app{padding:95px 0;background:#fff}
.iw-app .in-split{grid-template-columns:1fr 1fr;gap:8%;align-items:center}
.app-badges-phone{display:none}
.app-card{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;padding:34px;border-radius:14px;background:var(--mypay-paper)}
.app-qr{display:grid;place-items:center;width:176px;height:176px;padding:16px;border-radius:12px;background:#fff;border:1px solid var(--mypay-line)}
.app-qr img{width:100%;height:100%}
.app-card-copy>strong{display:block;font-size:17px;line-height:1.35;font-weight:500;color:var(--mypay-ink)}
.app-card-copy>p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--mypay-muted)}
.app-landing{padding:70px 0 110px}
.app-landing h1{font-size:var(--mypay-chapter);letter-spacing:-.04em;line-height:1.12}
.app-landing .app-badges{margin-top:30px}
.is-app-line{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px;padding-top:22px;border-top:1px solid var(--mypay-line)}
.is-app-line>span{font-size:15px;font-weight:500}
.is-app-line .app-badges{margin-top:0}
.lp-finale-app{margin-top:38px}
.lp-finale .lp-finale-app h3{margin:0 0 16px;font-size:.875rem;line-height:1.5;font-weight:400;letter-spacing:0;color:#b7b7a9}
.lp-finale-app-row{display:flex;align-items:center;gap:16px}
.lp-finale-app-qr{flex:none;width:96px;height:96px;padding:8px;border-radius:10px;background:#fff}
.lp-finale-brand .lp-finale-app img{filter:none}
.lp-finale-brand .lp-finale-app-qr img{width:100%;height:100%;display:block}
.lp-finale-app .app-badges{flex-direction:column;align-items:flex-start;gap:10px;margin-top:0}
.lp-finale-brand .lp-finale-app .app-badges img{width:auto;height:40px}
/* The Business Account hero phone stands on the dark hero itself, cut out of its studio card (Giorgos, 20 Sep 2026). */
.iw-hero{overflow:clip}
.iw-hero .in-phone.is-cutout{width:min(250px,100%);rotate:none;filter:drop-shadow(0 18px 28px #0007)}
.iw-hero .in-phone.is-cutout>img{clip-path:none;border-radius:0}
@media(max-width:900px){.iw-app{padding:60px 0}.iw-app .in-split{grid-template-columns:1fr;gap:34px}.lp-finale-app-qr{display:none}.lp-finale-app .app-badges{flex-direction:row}}
@media(max-width:620px){.iw-app{padding:50px 0}.app-card{display:none}.app-badges-phone{display:flex;margin-top:28px}.app-badges-phone img,.app-landing .app-badges img{height:48px}.iw-hero .in-phone.is-cutout{width:190px;max-height:none;overflow:visible;margin-top:37px}.app-landing{padding:40px 0 70px}}