/* Public pages share one compact frame, including the service status page. */
body.reference-site, body.reference-shared { --site-width:1180px; }
.reference-site header.head, .reference-shared header.head,
.reference-site main, .reference-shared main,
.reference-site .site-footer, .reference-shared .site-footer,
body.reference-shared .wrap, .reference-shared header.status-head {
  width:min(var(--site-width),calc(100% - 48px))!important;
  max-width:var(--site-width)!important;
  margin-inline:auto;
}
.reference-shared .legal-main .wrap { width:100%!important; }
.reference-site main>section, .reference-shared main>section { width:100%!important; max-width:none!important; }
.reference-site header.head, .reference-shared header.head { min-height:72px; padding-inline:22px; }
.reference-site .head nav, .reference-shared .head nav { gap:21px; }
.reference-site .head .brand, .reference-shared .head .brand { font-size:25px; }
.reference-site .head .actions>a, .reference-shared .head .actions>a { padding-inline:13px; }
.reference-site .hero {
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  min-height:460px; gap:26px; padding:44px 0 18px;
}
.reference-site .hero-copy { max-width:590px; padding:0; }
.reference-site .service-pill { font-size:12px; padding:8px 12px; }
.reference-site .hero h1 { font-size:46px; line-height:1.12; letter-spacing:-1.4px; margin:21px 0 18px; }
.reference-site .hero-copy>p { max-width:510px; font-size:16px; line-height:1.65; }
.reference-site .hero-buttons { gap:10px; margin-top:24px; }
.reference-site .hero-buttons a { min-height:46px; padding:11px 15px; font-size:13px; }
.reference-site .hero-benefits { gap:21px; margin-top:29px; }
.reference-site .hero-benefits>span { font-size:11px; }
.reference-site .hero-benefits svg { flex:none; width:21px; height:21px; }
.reference-site .hero-art { position:relative; height:auto; min-height:0; margin:0; display:grid; place-items:center; overflow:visible; }
.reference-site .hero-art:before { content:''; position:absolute; inset:7% 0; z-index:-1; background:radial-gradient(ellipse,#4a995329,transparent 68%); }
.reference-site .hero-brand-art { width:100%; max-width:510px; }
.reference-site .hero-product { display:block; width:100%; height:auto; max-width:none; border-radius:0; }
.reference-site section:not(.hero) { padding-top:52px; }
.reference-site section:not(.hero)>h2, .reference-site .section-heading h2 { font-size:30px; }
.reference-site .payment-section { padding-top:58px!important; }
.reference-site .payment-tiles { gap:16px; }
.reference-site .payment-tiles article { min-height:172px; padding:24px 18px; border-color:#36515d; background:linear-gradient(145deg,#172f3b,#122730); box-shadow:0 10px 28px #0002,inset 0 1px #caffc409; }
.reference-site .payment-brands { display:flex; align-items:center; justify-content:center; gap:7px; min-height:46px; }
.reference-site .payment-brands img { width:67px; height:43px; object-fit:contain; border-radius:6px; box-shadow:0 3px 9px #0002; }
.reference-site .payment-logo { width:67px; height:43px; background:#e7f3ed; }
.reference-site .payment-logo img { width:48px; height:29px; }
.reference-site .payment-tiles h3 { margin:17px 0 5px; font-size:17px; font-weight:650; }
.reference-site .payment-tiles p { font-size:12px; color:#b5c7ce; }
@media(max-width:1100px) and (min-width:721px) {
  .reference-site .head nav, .reference-shared .head nav { gap:14px; }
  .reference-site .head nav>a, .reference-site .head nav>details>summary,
  .reference-shared .head nav>a, .reference-shared .head nav>details>summary { font-size:12px; }
  .reference-site .head .actions>a, .reference-shared .head .actions>a { padding-inline:10px; font-size:12px; }
  .reference-site .hero { grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr); gap:25px; }
  .reference-site .hero h1 { font-size:40px; }
  .reference-site .hero-benefits { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }
  .reference-site .payment-brands { gap:5px; }
  .reference-site .payment-brands img { width:58px; height:38px; }
}
@media(max-width:850px) and (min-width:721px) {
  .reference-site header.head, .reference-shared header.head { flex-wrap:wrap; padding:12px 18px; gap:12px; }
  .reference-site .head nav, .reference-shared .head nav { order:3; width:100%; justify-content:center; }
  .reference-site .hero h1 { font-size:36px; }
  .reference-site .hero-brand-art { width:100%; }
  .reference-site .payment-tiles article { padding-inline:10px; }
  .reference-site .payment-brands { gap:4px; }
  .reference-site .payment-brands img { width:50px; height:33px; }
}
@media(max-width:720px) {
  .reference-site header.head, .reference-shared header.head,
  .reference-site main, .reference-shared main,
  .reference-site .site-footer, .reference-shared .site-footer,
  body.reference-shared .wrap, .reference-shared header.status-head { width:calc(100% - 32px)!important; max-width:none!important; }
  .reference-site header.head, .reference-shared header.head { padding-inline:14px; min-height:64px; }
  .reference-site .head .actions .cta, .reference-shared .head .actions .cta { display:none; }
  .reference-site .head .actions, .reference-shared .head .actions { margin-left:auto!important; }
  .reference-site .head .nav-toggle, .reference-shared .head .nav-toggle { order:3; margin-left:0!important; }
  .reference-site .hero { grid-template-columns:1fr; min-height:0; padding:28px 0 0; gap:15px; }
  .reference-site .hero h1 { font-size:32px; line-height:1.14; letter-spacing:-.9px; margin:17px 0 15px; }
  .reference-site .hero-copy>p { font-size:15px; line-height:1.6; }
  .reference-site .hero-buttons { gap:9px; margin-top:20px; }
  .reference-site .hero-buttons a { min-height:46px; font-size:13px; }
  .reference-site .hero-benefits { margin-top:22px; gap:13px; }
  .reference-site .hero-art { width:100%; margin:0; min-height:0; overflow:visible!important; }
  .reference-site .hero-brand-art { width:min(380px,100%); }
  .reference-site section:not(.hero) { padding-top:42px; }
  .reference-site section:not(.hero)>h2, .reference-site .section-heading h2 { font-size:26px; }
  .reference-site .payment-section { padding-top:46px!important; }
  .reference-site .payment-tiles { grid-template-columns:1fr; gap:12px; }
  .reference-site .payment-tiles article { min-height:156px; padding:22px 16px; }
  .reference-site .payment-tiles article:last-child { grid-column:auto; }
  .reference-site .payment-brands { gap:8px; }
  .reference-site .payment-brands img { width:70px; height:45px; }
  .reference-site .payment-tiles h3 { font-size:16px; }
}