
:root{
  /* --- Setld ink & neutrals (Revolut structure, Setld warmth) --- */
  --ink:#181410;
  --bone:#FDFCFA;
  --mist:#F5F1EB;
  --ash:#DDD3C5;
  --slate:#6E675F;
  --graphite:#3A332C;
  --accent:#FF4A1C;
  --promo:linear-gradient(to right,#FF4A1C,#FFA271);

  --display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --ui:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;

  --page:1200px;
  --gap:80px;
  --r-card:22.5px;
  --r-list:20px;
  --r-pill:9999px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.5;letter-spacing:-0.005em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--page);margin:0 auto;padding:0 clamp(20px,4vw,40px)}

/* ---------- type scale ---------- */
.d-xl{font-family:var(--display);font-weight:400;font-size:clamp(46px,7.2vw,88px);line-height:1.0;letter-spacing:-0.024em}
.d{font-family:var(--display);font-weight:400;font-size:clamp(36px,5vw,52px);line-height:1.0;letter-spacing:-0.012em}
.h{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1.2;letter-spacing:-0.01em}
.h-sm{font-family:var(--display);font-weight:500;font-size:24px;line-height:1.17;letter-spacing:-0.01em}
.sub{font-family:var(--display);font-weight:400;font-size:18px;line-height:1.33}
.body{font-size:16px;line-height:1.5;color:var(--graphite)}
.cap{font-size:12px;line-height:1.5;letter-spacing:0.015em;text-transform:uppercase;color:var(--slate);font-weight:600}
.sm{font-size:14px;line-height:1.57;letter-spacing:-0.005em;color:var(--slate)}
.dot{color:var(--accent)}
.muted-head{color:var(--slate)}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-pill);font-family:var(--ui);font-weight:600;font-size:16px;text-decoration:none;padding:11px 24px;border:2px solid transparent;transition:opacity .18s,background .18s,border-color .18s;cursor:pointer;white-space:nowrap}
.pill-dark{background:var(--ink);color:var(--bone)}
.pill-dark:hover{opacity:.86}
.pill-light{background:var(--bone);color:var(--ink);border-color:var(--ink)}
.pill-light:hover{background:var(--mist)}
.pill-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.85);backdrop-filter:blur(6px)}
.pill-ghost:hover{background:rgba(255,255,255,.22)}
.pill-sm{font-size:14px;padding:8px 18px}
.tag{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-pill);border:1px solid var(--ash);padding:5px 12px;font-size:12px;font-weight:600;letter-spacing:.015em;text-transform:uppercase;color:var(--slate)}
.link{text-decoration:none;color:rgba(24,20,16,.8);font-weight:600;font-size:16px}
.link:hover{color:var(--ink)}

/* ---------- promo bar ---------- */
.promo{background:var(--promo);color:#fff;font-size:15px;font-weight:400;text-align:center;padding:10px 20px;letter-spacing:-0.005em}
.promo a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* ---------- nav ---------- */
.nav{background:var(--ink);color:var(--bone);position:sticky;top:0;z-index:60}
.nav .wrap{display:flex;align-items:center;gap:32px;height:68px}
.mark{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--bone)}
.wordmark{font-family:var(--display);font-weight:800;font-style:italic;font-size:24px;letter-spacing:-0.03em}
.navlinks{display:flex;gap:28px;flex:1;justify-content:center}
.navlinks a{text-decoration:none;color:rgba(253,252,250,.82);font-size:16px;font-weight:500}
.navlinks a:hover{color:#fff}
.navright{display:flex;align-items:center;gap:20px;margin-left:auto}
.navright .login{text-decoration:none;color:var(--bone);font-size:16px;font-weight:500}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:#DDE9F2}
.sky{position:absolute;inset:0;background:
   radial-gradient(110% 70% at 14% 100%, rgba(255,168,120,.55) 0%, rgba(255,168,120,0) 62%),
   radial-gradient(80% 55% at 88% 96%, rgba(255,226,200,.65) 0%, rgba(255,226,200,0) 65%),
   linear-gradient(180deg,#6E9BC4 0%,#8DB4D6 26%,#A9C8E2 50%,#C6D8E4 72%,#D9DCDC 100%)}
.scrim{position:absolute;inset:0;background:
   linear-gradient(100deg, rgba(20,28,38,.46) 0%, rgba(20,28,38,.20) 48%, rgba(20,28,38,0) 70%),
   radial-gradient(70% 60% at 8% 78%, rgba(20,28,38,.34) 0%, rgba(20,28,38,0) 70%),
   linear-gradient(180deg, rgba(20,28,38,.20) 0%, rgba(20,28,38,0) 30%)}
.cloud{position:absolute;border-radius:50%;background:rgba(255,255,255,.92);filter:blur(38px)}
.hero-inner{position:relative;padding-top:clamp(72px,9vw,120px)}
.hero h1{margin:0;color:#fff;text-shadow:0 2px 48px rgba(20,28,38,.30)}
.hero p{max-width:520px;color:rgba(255,255,255,.94);margin:24px 0 0;text-shadow:0 1px 24px rgba(20,28,38,.45)}
.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero-meta{display:flex;gap:22px;margin-top:30px;flex-wrap:wrap;color:rgba(255,255,255,.9);font-size:12px;font-weight:600;letter-spacing:.015em;text-transform:uppercase}
.hero-grid{display:flex;gap:56px;align-items:flex-end;flex-wrap:wrap;justify-content:space-between}
.hero-copy{flex:1 1 460px;min-width:min(100%,320px);padding-bottom:clamp(40px,6vw,80px)}

/* phone card overlapping photo bottom */
.phonecard{flex:0 0 auto;width:330px;background:var(--bone);border-radius:var(--r-card) var(--r-card) 0 0;padding:20px 20px 0;margin-bottom:-1px}
.phonecard .label{display:inline-flex;align-items:center;gap:7px;background:var(--mist);border-radius:var(--r-pill);padding:5px 13px;font-size:12px;font-weight:600;letter-spacing:.015em;text-transform:uppercase;color:var(--slate);margin-bottom:14px}
.shot{border-radius:18px 18px 0 0;overflow:hidden;border:1px solid var(--ash);border-bottom:0;background:var(--mist)}
.shot img{width:100%;height:400px;object-fit:cover;object-position:top center}

/* ---------- sections ---------- */
section.band{padding:clamp(52px,6vw,72px) 0}
.rule{height:1px;background:var(--ash);border:0;margin:0}

/* trust grid */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.trust .cell{text-align:center}
.trust .icon{height:32px;display:flex;align-items:center;justify-content:center;color:var(--ink);margin-bottom:12px}
.trust .n{font-family:var(--display);font-weight:500;font-size:24px;letter-spacing:-0.01em}

/* feature cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.card{background:var(--bone);border:1px solid var(--ash);border-radius:var(--r-card);padding:24px}
.card .h-sm{margin:16px 0 8px}
.card .body{font-size:16px}
.card .icon{color:var(--ink)}

/* list container */
.list{background:var(--mist);border-radius:var(--r-list);padding:8px 24px;margin-top:40px}
.row{display:flex;align-items:flex-start;gap:20px;padding:24px 0;border-bottom:1px solid var(--ash)}
.row:last-child{border-bottom:0}
.row .num{font-family:var(--display);font-weight:400;font-size:32px;line-height:1;letter-spacing:-0.01em;color:var(--slate);min-width:44px}
.row .rt{flex:1}
.row .meta{font-size:14px;color:var(--slate)}

/* dark band + white cards */
.dark{background:var(--ink);color:var(--bone)}
.dark .muted-head{color:#A79E93}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.tier{background:var(--bone);color:var(--ink);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:16px}
.tier .shot2{border-radius:14px;overflow:hidden;border:1px solid var(--ash);background:var(--mist)}
.tier .shot2 img{width:100%;height:300px;object-fit:cover;object-position:top center}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.quote{border-top:2px solid var(--ink);padding-top:20px}
.quote .q{font-family:var(--display);font-weight:400;font-size:20px;line-height:1.35;letter-spacing:-0.01em}
.quote .who{margin-top:16px;font-size:14px;color:var(--slate)}

/* closing */
.close{background:var(--mist);text-align:center}
.close .d-xl{max-width:900px;margin:0 auto}

/* footer */
.foot{background:var(--ink);color:var(--bone);padding:64px 0 40px}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.foot h4{font-size:12px;letter-spacing:.015em;text-transform:uppercase;color:#A79E93;font-weight:600;margin:0 0 16px}
.foot a{display:block;text-decoration:none;color:rgba(253,252,250,.82);font-size:14px;padding:5px 0}
.foot a:hover{color:#fff}
.footbase{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid rgba(253,252,250,.16);font-size:12px;color:#A79E93;letter-spacing:.015em;text-transform:uppercase}


/* ---------- merchant band ---------- */
.merch{background:var(--mist);border-top:1px solid var(--ash);border-bottom:1px solid var(--ash)}
.merch-head{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:end}
.merch-intro .body{max-width:440px}
.strip{list-style:none;display:flex;flex-wrap:wrap;margin:48px 0 0;padding:20px 0;border-top:1px solid var(--ash);border-bottom:1px solid var(--ash)}
.strip li{flex:1 1 0;min-width:150px;font-size:12px;font-weight:600;letter-spacing:.015em;text-transform:uppercase;color:var(--slate);padding-left:20px;border-left:1px solid var(--ash)}
.strip li:first-child{padding-left:0;border-left:0}

.wide{background:var(--bone);border:1px solid var(--ash);border-radius:var(--r-card);padding:24px;margin-top:40px;display:grid;grid-template-columns:1fr 1.35fr;gap:32px;align-items:center}
.wide-copy .label{display:inline-flex;align-items:center;border-radius:var(--r-pill);background:var(--mist);padding:5px 13px;font-size:12px;font-weight:600;letter-spacing:.015em;text-transform:uppercase;color:var(--slate)}
.wide-shot{border-radius:14px;overflow:hidden;border:1px solid var(--ash);background:var(--mist)}
.wide-shot img{width:100%;height:auto}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
.stepnum{font-family:var(--display);font-weight:400;font-size:32px;line-height:1;letter-spacing:-0.01em;color:var(--slate);margin-bottom:16px}
.steps .card{background:var(--bone)}
.steps .h-sm{margin:0 0 8px}

.pos{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;margin:72px 0}
.pos-shot{width:280px;margin-left:auto;border-radius:18px;overflow:hidden;border:1px solid var(--ash);background:var(--bone)}
.pos-shot img{width:100%;height:auto}

.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
.metrics .card{background:var(--bone);display:flex;flex-direction:column;gap:12px}
.metric{font-family:var(--display);font-weight:400;font-size:40px;line-height:1;letter-spacing:-0.01em;display:flex;align-items:baseline;gap:8px}
.metric .unit{font-family:var(--ui);font-size:14px;font-weight:600;letter-spacing:-0.005em;color:var(--slate);text-transform:none}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:72px}
.pair .card{background:var(--bone)}
.pair .h-sm{margin:0 0 12px;max-width:340px}

.pricing{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:72px;background:var(--bone);border:1px solid var(--ash);border-radius:var(--r-card);padding:40px}
.pricetable{display:flex;flex-direction:column}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--ash);font-size:16px;color:var(--graphite)}
.prow:last-child{border-bottom:0}
.prow b{font-weight:600;color:var(--ink)}
.prow.accent b{color:var(--accent)}

.takeaway{background:var(--ink);color:var(--bone);border-radius:var(--r-card);padding:40px;margin-top:72px;display:grid;grid-template-columns:1fr .6fr;gap:40px;align-items:center;overflow:hidden}
.takeaway .h{color:var(--bone)}
.takeaway-shot{width:230px;margin:0 auto;border-radius:16px 16px 0 0;overflow:hidden;border:1px solid rgba(253,252,250,.18);border-bottom:0;margin-bottom:-40px}
.takeaway-shot img{width:100%;height:300px;object-fit:cover;object-position:top center}

@media(max-width:900px){
  .merch-head,.pos,.pricing,.pair,.takeaway,.wide{grid-template-columns:1fr;gap:32px}
  .steps,.metrics{grid-template-columns:1fr}
  .pos-shot,.takeaway-shot{margin:0 auto}
  .takeaway-shot{margin-bottom:-40px}
}

@media(max-width:900px){
  .trust{grid-template-columns:repeat(2,1fr);gap:32px}
  .cards,.tiers,.quotes{grid-template-columns:1fr}
  .footgrid{grid-template-columns:1fr 1fr}
  .navlinks{display:none}
}

/* ---------- multi-page additions ---------- */
.navlinks a[aria-current="page"]{color:#fff;position:relative}
.navlinks a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--accent);border-radius:2px}

/* interior page header */
.pagehead{background:var(--mist);border-bottom:1px solid var(--ash);padding:clamp(48px,6vw,80px) 0 clamp(40px,5vw,64px)}
.pagehead .d{margin:20px 0 0;max-width:760px}
.pagehead .sub{margin:20px 0 0;max-width:560px;color:var(--graphite)}
.pagehead .pill{margin-top:32px}

/* alternating feature rows */
.featrow{display:grid;grid-template-columns:1fr .8fr;gap:56px;align-items:center;padding:clamp(40px,5vw,64px) 0;border-bottom:1px solid var(--ash)}
.featrow:last-of-type{border-bottom:0}
.featrow.flip .featrow-copy{order:2}
.featrow-copy .h{margin:16px 0 16px;max-width:460px}
.featrow-shot{width:290px;margin:0 auto;border-radius:18px;overflow:hidden;border:1px solid var(--ash);background:var(--mist)}
.featrow-shot img{width:100%;height:auto}
.featlist{list-style:none;margin:24px 0 0;padding:0}
.featlist li{padding:10px 0 10px 26px;border-bottom:1px solid var(--ash);font-size:16px;color:var(--graphite);position:relative}
.featlist li:last-child{border-bottom:0}
.featlist li::before{content:"";position:absolute;left:0;top:18px;width:10px;height:2px;background:var(--accent)}

/* venues cross-sell teaser */
.teaser{background:var(--ink);color:var(--bone);border-radius:var(--r-card);padding:40px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.teaser .h{color:var(--bone);margin:16px 0 12px;max-width:520px}
.teaser .body{color:#A79E93;max-width:520px}

/* FAQ */
.faq{margin-top:40px;border-top:1px solid var(--ash)}
.faq details{border-bottom:1px solid var(--ash)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:-0.01em;display:flex;justify-content:space-between;gap:24px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--ui);font-size:22px;font-weight:400;color:var(--slate);flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 20px;max-width:720px;color:var(--graphite);font-size:16px;line-height:1.5}

@media(max-width:900px){
  .featrow,.featrow.flip .featrow-copy,.teaser{grid-template-columns:1fr;gap:32px}
  .featrow.flip .featrow-copy{order:0}
  .teaser{grid-template-columns:1fr}
}
