/* ─────────────────────────────────────────────────────────────
   Pingt partner pages — shared styles (index, intro, apply).
   Same system as the member app: Inter for text, League Spartan
   (−4 tracking) for headlines, orange = link / main action,
   one scaling page margin, rounded corners.
   ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --black:#0A0A0A;--white:#FFFFFF;--grey-dark:#4A4A4A;--grey-mid:#8A8A8A;--grey-light:#F2F2F2;--grey-border:#E0E0E0;
  --orange:#F4511E;
  --head:'League Spartan','Inter',sans-serif;
  --gutter:clamp(16px,5vw,28px);
  --radius:14px;
}
html{scroll-behavior:smooth;}
/* Hide text until the right language is filled in (with a JS-free fallback in each page). */
html:not(.i18n-ready) body{opacity:0;}
body{font-family:'Inter',sans-serif;background:var(--white);color:var(--black);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:opacity .15s;}
a{color:inherit;}
.wrap{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;}
@media (min-width:600px){body{background:var(--grey-light);} .wrap{background:var(--white);border-left:1px solid var(--grey-border);border-right:1px solid var(--grey-border);}}

/* ── Orange brand bar (landing page) ── */
.p-nav{display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter);padding-top:calc(18px + env(safe-area-inset-top));background:var(--orange);}
.p-logo img{height:56px;display:block;}
.lang{display:flex;align-items:center;gap:6px;}
.lang a{font-size:12px;font-weight:700;letter-spacing:0.05em;text-decoration:none;cursor:pointer;color:rgba(255,255,255,0.6);}
.lang a.active{color:var(--white);}
.lang span{font-size:11px;color:rgba(255,255,255,0.4);}
/* Dark variant on white bars */
.lang.dark a{color:var(--grey-mid);} .lang.dark a.active{color:var(--black);} .lang.dark span{color:var(--grey-border);}

/* ── White page bar (intro / apply) ── */
.p-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:14px var(--gutter);padding-top:calc(14px + env(safe-area-inset-top));background:var(--white);border-bottom:1px solid var(--grey-border);}
.p-back{font-size:16px;color:var(--black);text-decoration:none;background:none;border:none;cursor:pointer;padding:4px 4px 4px 0;}
.p-bar-title{flex:1;font-size:17px;font-weight:800;letter-spacing:-0.3px;}

/* ── Hero ── */
.hero{padding:26px var(--gutter) 24px;}
.hero h1{font-family:var(--head);font-size:clamp(30px,9vw,40px);font-weight:700;letter-spacing:-0.04em;line-height:1.02;margin-bottom:14px;}
.hero h1 em{font-style:normal;font-weight:400;color:var(--grey-mid);}
.hero-sub{font-size:15px;font-weight:300;color:var(--grey-dark);line-height:1.65;}
/* "Free for partners" line under the hero text */
.free-line{display:flex;align-items:flex-start;gap:8px;margin-top:16px;font-size:15px;font-weight:800;color:var(--black);line-height:1.4;}
.free-line i{color:var(--orange);font-size:18px;margin-top:1px;}
.kicker{font-size:11px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--orange);margin-bottom:10px;}
.sign{font-size:13px;color:var(--grey-mid);margin-top:14px;}

/* ── Buttons ── */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;border-radius:10px;font-family:'Inter',sans-serif;font-size:15px;font-weight:800;text-decoration:none;cursor:pointer;border:2px solid var(--orange);background:var(--orange);color:var(--white);transition:opacity .15s;}
.btn:active{opacity:0.85;}
.btn.outline{background:var(--white);color:var(--orange);}
.btn.white{background:var(--white);border-color:var(--white);color:var(--orange);}
.btn:disabled{background:var(--grey-border);border-color:var(--grey-border);color:var(--grey-mid);cursor:not-allowed;}
.btn-row{display:flex;gap:10px;padding:0 var(--gutter) 30px;}
.btn-row .btn{flex:1;font-size:14px;padding:14px 10px;}

/* ── How it works ── */
.how{background:var(--grey-light);padding:22px var(--gutter) 18px;}
.how-title{font-size:clamp(16px,4.6vw,18px);font-weight:800;letter-spacing:-0.3px;margin-bottom:8px;}
.step{display:flex;gap:14px;align-items:center;padding:8px 0;}
.step-icon{width:52px;height:52px;flex-shrink:0;background:var(--white);border:1.5px solid var(--orange);border-radius:12px;display:flex;align-items:center;justify-content:center;}
.step-icon i{font-size:20px;color:var(--orange);}
.step-title{font-family:var(--head);font-size:17px;font-weight:700;letter-spacing:-0.04em;margin-bottom:2px;}
.step-desc{font-size:12.5px;font-weight:300;color:var(--grey-dark);line-height:1.5;}

/* ── Regulars & new customers ── */
.reg{padding:6px var(--gutter) 30px;}
.reg-title{font-family:var(--head);font-size:clamp(24px,7vw,30px);font-weight:700;letter-spacing:-0.04em;line-height:1.08;margin-bottom:18px;}
.reg-item{display:flex;gap:14px;align-items:flex-start;padding:10px 0;}
.reg-icon{width:44px;height:44px;flex-shrink:0;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;}
.reg-icon i{font-size:18px;color:var(--white);}
.reg-item-title{font-size:15px;font-weight:800;margin:2px 0 4px;}
.reg-item-desc{font-size:14px;font-weight:300;color:var(--grey-dark);line-height:1.6;}

/* ── Intro call-to-action (orange card) ── */
.intro-cta{margin:28px var(--gutter);padding:26px 22px;border-radius:var(--radius);background:var(--orange);color:var(--white);}
.intro-cta .kicker{color:rgba(255,255,255,0.85);}
.intro-cta h2{font-family:var(--head);font-size:clamp(26px,7.5vw,32px);font-weight:700;letter-spacing:-0.04em;line-height:1.05;margin-bottom:10px;}
.intro-cta p{font-size:14px;line-height:1.6;margin-bottom:20px;opacity:0.95;}

/* ── Forms ── */
.form{padding:0 var(--gutter) 8px;}
.f-sec{padding:22px 0 6px;border-top:1px solid var(--grey-border);}
.f-sec:first-child{border-top:none;}
.f-sec-title{font-size:15px;font-weight:800;margin-bottom:14px;}
.field{margin-bottom:18px;}
.field-row{display:flex;gap:12px;}
.field-row .field{flex:1;min-width:0;}
.f-label{display:block;font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--grey-mid);margin-bottom:6px;}
.f-input,.f-textarea{width:100%;padding:11px 0;font-size:16px;font-family:'Inter',sans-serif;border:none;border-bottom:1px solid var(--grey-border);outline:none;color:var(--black);background:transparent;border-radius:0;}
.f-input:focus,.f-textarea:focus{border-bottom-color:var(--orange);}
.f-input::placeholder,.f-textarea::placeholder{color:#C4C4C4;}
.f-textarea{resize:vertical;min-height:72px;line-height:1.5;}
.f-hint{font-size:12px;font-weight:300;color:var(--grey-mid);margin-top:6px;line-height:1.5;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{padding:10px 14px;min-width:52px;text-align:center;border:1.5px solid var(--grey-border);border-radius:999px;background:var(--white);font-family:'Inter',sans-serif;font-size:14px;font-weight:700;color:var(--black);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.chip.on,.chip.selected{background:var(--orange);border-color:var(--orange);color:var(--white);}
.f-error{font-size:13px;font-weight:600;color:var(--orange);min-height:18px;margin:6px 0 10px;}
.f-footer{position:sticky;bottom:0;padding:12px var(--gutter) calc(14px + env(safe-area-inset-bottom));background:var(--white);border-top:1px solid var(--grey-border);margin-top:auto;}
.f-note{font-size:12px;color:var(--grey-mid);text-align:center;margin-top:10px;line-height:1.5;}
.f-note a{color:var(--orange);font-weight:700;text-decoration:none;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

/* ── Done screen ── */
.done{flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px var(--gutter);}
.done-icon{width:64px;height:64px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;margin-bottom:22px;}
.done-icon i{font-size:26px;color:var(--white);}
.done h1{font-family:var(--head);font-size:clamp(30px,9vw,38px);font-weight:700;letter-spacing:-0.04em;line-height:1.05;margin-bottom:12px;}
.done p{font-size:15px;color:var(--grey-dark);line-height:1.65;margin-bottom:8px;}
.done .btn{margin-top:22px;}
[hidden]{display:none !important;}

/* ═════════════════════════════════════════════════════════════
   TABLET & DESKTOP (16 Oct 2026) — landing page only (.wrap.wide).
   The intro and apply forms stay a comfortable single column.
   ═════════════════════════════════════════════════════════════ */
@media (min-width:700px){
  .wrap.wide{max-width:820px;--gutter:40px;}
  .wide .hero{padding:48px var(--gutter) 28px;}
  .wide .hero h1{font-size:52px;}
  .wide .hero-sub{font-size:17px;max-width:600px;}
  .wide .btn-row{max-width:560px;padding-bottom:44px;}
  .wide .how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:36px var(--gutter);}
  .wide .how-title{grid-column:1/-1;font-size:22px;margin-bottom:4px;}
  .wide .step{flex-direction:column;align-items:flex-start;gap:12px;background:var(--white);border-radius:var(--radius);padding:20px;}
  .wide .step-desc{font-size:14px;}
}
@media (min-width:1000px){
  .wrap.wide{max-width:1080px;--gutter:56px;}
  .wide .p-logo img{height:64px;}
  .wide .hero{padding:80px var(--gutter) 32px;max-width:860px;}
  .wide .hero h1{font-size:72px;margin-bottom:20px;}
  .wide .hero-sub{font-size:19px;max-width:640px;}
  .wide .free-line{font-size:17px;}
  .wide .btn-row{padding-bottom:72px;}
  .wide .btn-row .btn{font-size:15px;padding:16px 18px;}
  /* Regulars & new customers: headline left, the two points right */
  .wide .reg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;padding:64px var(--gutter);border-top:1px solid var(--grey-border);}
  .wide .reg .kicker{grid-column:1;grid-row:1;}
  .wide .reg-title{grid-column:1;grid-row:2 / span 2;font-size:44px;margin-bottom:0;}
  .wide .reg-item{grid-column:2;padding:0 0 22px;}
  .wide .reg > .reg-item:nth-child(3){grid-row:2;}
  .wide .reg > .reg-item:nth-child(4){grid-row:3;}
  .wide .reg{align-content:start;}
  .wide .reg-item-desc{font-size:15px;}
  .wide .how{padding:64px var(--gutter);gap:20px;}
  .wide .how-title{font-size:28px;margin-bottom:12px;}
  .wide .step{padding:28px;}
  .wide .step-title{font-size:21px;}
  /* Orange intro card: text left, button right */
  .wide .intro-cta{margin:64px var(--gutter);padding:52px 56px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:56px;align-items:center;}
  .wide .intro-cta > :not(.btn){grid-column:1;}
  .wide .intro-cta h2{font-size:46px;}
  .wide .intro-cta p{font-size:16px;margin-bottom:0;max-width:520px;}
  .wide .intro-cta .btn{grid-column:2;grid-row:1 / span 3;width:auto;padding:18px 28px;white-space:nowrap;}
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{opacity:0.88;}
}

/* Forms (intro / apply) on bigger screens: a little more air around the column */
@media (min-width:768px){
  .wrap:not(.wide){--gutter:36px;}
}