/* Tally corporate website. Shared by all four HTML pages. No build required.
   Sections follow page order; see docs/marketing-guide.md before editing. */
/* thai */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/iJWQBXeUZi_OHPqn4wq6hQ2_hbJ1xyN9wd43SofNWcdfKI2hTWsb-P2c.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/iJWQBXeUZi_OHPqn4wq6hQ2_hbJ1xyN9wd43SofNWcdfMo2hTWsb-P2c.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/iJWQBXeUZi_OHPqn4wq6hQ2_hbJ1xyN9wd43SofNWcdfPI2hTWsb-A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/iJWQBXeUZi_OHPqn4wq6hQ2_hbJ1xyN9wd43SofNWcdfKI2hTWsb-P2c.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/iJWQBXeUZi_OHPqn4wq6hQ2_hbJ1xyN9wd43SofNWcdfMo2hTWsb-P2c.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/iJWQBXeUZi_OHPqn4wq6hQ2_hbJ1xyN9wd43SofNWcdfPI2hTWsb-A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{font-family:"Noto Sans Thai";font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/noto-sans-thai-v29-latin-regular.woff2') format('woff2')}
@font-face{font-family:Barlow;font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/barlow-v13-latin-300.woff2') format('woff2')}
@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-v13-latin-regular.woff2') format('woff2')}
@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-v13-latin-500.woff2') format('woff2')}
@font-face{font-family:Quattrocento;font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/quattrocento-v24-latin-regular.woff2') format('woff2')}
/* Kanit 500, Latin only: the live English tablet header's "Apply" button is the one text set in it. */
@font-face{font-family:Kanit;font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/kanit-v17-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* --img-gap: the live Thai image modules sit on a 16px/19.2px text line, which leaves 5.2px below the image;
   the English ones have line-height 0, so no gap. */
/* Live child theme: the first and last row of every section get 24px padding up to 979px and 40px from 980px.
   Divi's tablet layout runs to 980px, so at exactly 980px the tablet layout has the 40px rows. */
:root{--row-pt:40px;--row-pb:40px}
/* Up to 979px the child theme also makes every row full width; at 980px a row without its own width is Divi's 80%. */
:root{--divi-row:80%}
@media(max-width:979px){:root{--row-pt:24px;--row-pb:24px;--divi-row:100%}}
:root{--img-gap:5.2px;--pink:#ed1b7f;--bright-pink:#ed1b7f;--ink:#262522;--muted:#7b7a77;--paper:#f8f6f3;--radius:20px;--body-font:"Noto Sans Thai",sans-serif;--heading-font:"Noto Sans Thai",sans-serif}
html:lang(en){--img-gap:0px;--body-font:Barlow,sans-serif;--heading-font:Quattrocento,serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:135px}
body{margin:0;color:var(--ink);background:white;font-family:var(--body-font);font-size:16px;font-weight:400;line-height:1.2;letter-spacing:.5px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
button:disabled{cursor:default;opacity:.35}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,figure{margin:0}
h1,h2,h3,h4{font-weight:400;letter-spacing:1px}
h1,.section-title{font-family:var(--heading-font);line-height:1.2}
h1{font-size:64px;letter-spacing:-.5px}
.section-title{font-size:48px;margin-bottom:34px}
p+p{margin-top:1em}
:focus-visible{outline:3px solid var(--pink);outline-offset:5px}
[hidden]{display:none!important}
/* Rows as on the live site: 90% of the window, at most 1280px; .container rows add 40px inside. */
.wide{width:90%;max-width:1280px;margin-inline:auto}
.container{width:90%;max-width:1280px;margin-inline:auto;padding-inline:40px}
.eyebrow{font-family:var(--body-font);font-size:24px;color:var(--bright-pink);line-height:1.2;margin-bottom:10px;letter-spacing:1.5px}
html:lang(en) .eyebrow{text-transform:uppercase;letter-spacing:1.5px;font-weight:500}
.emphasis{color:var(--ink)}
.caption{font-size:20px;color:var(--muted);line-height:1.2}
.caption h3{color:var(--ink)}
.caption p{margin:0}
.section-intro{font-size:24px;line-height:1.2}
.button{display:inline-flex;justify-content:center;align-items:center;background:var(--pink);color:white;border:0;border-radius:20px;padding:13px 17px;min-height:44px;line-height:1.2;transition:background .2s}
html:lang(en) .button{font-weight:500;letter-spacing:1px}
.button:hover{background:#ed65a7;text-decoration:none}
.icon-button{border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;padding:8px;min-width:44px;min-height:44px}
.icon-button img{width:24px;height:24px;object-fit:contain}
.skip-link{position:fixed;top:0;left:20px;z-index:200;background:white;padding:12px;transform:translateY(-150%)}
.skip-link:focus{transform:none}

/* Header: desktop navigation, mobile menu. */
.site-header{position:fixed;inset:0 0 auto;z-index:100;pointer-events:none}
.site-header a,.site-header button,.mobile-menu{pointer-events:auto}
/* Live: a 59.2px row fixed 18px from the top, as on the live site once its banner is closed (CR-0002 R-1);
   the menu pill is centred in it, the buttons sit on its baseline. */
.navigation{position:absolute;top:18px;left:0;right:0;margin-inline:auto;display:flex;justify-content:space-between;align-items:center;min-height:59.2px}
.nav-pill{display:flex;align-items:center;height:50px;background:rgba(253,251,247,.85);border-radius:20px;padding:0 10px;backdrop-filter:blur(12px)}
/* Live Divi menu: the logo box (99px logo, 30px after it) and the menu share the pill and shrink in proportion when it is
   too narrow; the menu items have 11px either side and wrap onto a second line (from about 990px). */
.brand{display:flex;flex:0 1 auto;min-width:0;padding-right:30px}
.brand img{width:99px;max-width:100%;height:auto}
.desktop-nav{display:flex;flex-wrap:wrap;align-items:center;margin:0 -11px;min-width:0}
.desktop-nav a{padding:0 11px}
.desktop-nav a:hover,.language-switch a:hover{color:var(--pink)}
.desktop-nav a{white-space:nowrap;color:#676563;letter-spacing:1.25px}
html:lang(en) .desktop-nav{letter-spacing:1px;font-weight:500}
.nav-actions{display:flex;align-items:baseline;gap:21px;flex-shrink:0}
.language-switch{display:flex;align-items:center;background:rgba(253,251,247,.85);border-radius:20px;padding:5px;font-size:14px;letter-spacing:.8px}
.language-switch a{padding:5px 10px;color:#c3c1bf}
.language-switch a+a{border-left:1px solid #eee}
.language-switch [aria-current]{color:var(--pink)}
/* Live Divi Pixel button: 10px 15px padding inside a 2px transparent border, on a 1.2 line (1.7 in English). */
.contact-button{background:rgba(237,27,127,.85);letter-spacing:.8px;min-height:0;padding:10px 15px;border:2px solid rgba(255,255,255,0);line-height:1.2}
.contact-button:hover{background:#ed6fac}
.menu-toggle{display:none;background:rgba(253,251,247,.85);border-radius:16px}
.menu-toggle img{width:32px;height:32px}
/* Menu panel, after the live Divi Pixel pop-up: 50px from the top, 16px narrower than its wrapper, one Divi row
   (row padding, 16px sides) with an empty 14px paragraph above a plain 14px list; the language row comes last.
   The live wrapper is at least 600px wide and centred, which pushes the panel off the left edge on phones;
   --menu-min is 0, so here the wrapper is never wider than the window. It slides down and fades in over 0.3s,
   and fades out over 0.3s. */
:root{--menu-min:0px}
.mobile-menu{position:fixed;z-index:1;top:50px;left:calc(50% - max(var(--menu-min) / 2, 50%));width:calc(max(var(--menu-min), 100%) - 16px);
 padding:var(--row-pt) 16px var(--row-pb);background:rgba(253,251,247,.95);border-radius:16px;box-shadow:0 8px 10px rgba(0,0,0,.05);
 color:var(--ink);font-size:14px;line-height:1.2;letter-spacing:.5px;transition:opacity .3s ease,transform .3s ease,display .3s allow-discrete}
.mobile-menu[hidden]{display:none;opacity:0}
@starting-style{.mobile-menu:not([hidden]){opacity:0;transform:translateY(-100vh)}}
.mobile-menu ul{margin:14px 0 0;padding:0;list-style:none}
.mobile-menu a{color:#676563}
.language-item{display:flex;gap:12px}
.language-label{flex:1}
.language-item [aria-current]{color:var(--pink)}
@media(min-width:768px){.language-label{display:none}}

/* Home: hero and three benefits. */
/* Live: a 3/5 + 2/5 row (57.8%, 5.5% gap, 36.7%), the text column centred on the image. */
.hero{background:linear-gradient(90deg,#fff 0%,#f7eff2 100%);padding:60px 0 40px}
.hero-main{display:grid;grid-template-columns:57.8% 36.7%;column-gap:5.5%;padding:40px 0 24px}
.hero-copy{align-self:center}
.hero .eyebrow{margin-bottom:24px;padding-bottom:10px;letter-spacing:1.5px}
.hero h1{padding-bottom:10px}
.hero-cta{display:flex;width:fit-content;min-height:0;margin:40px 0;padding:12px 96px;border-radius:15px;letter-spacing:1.25px;text-align:center}
.hero-note{font-size:20px;line-height:1.2;padding-bottom:10px}
.hero-image{width:100%;height:auto;margin-bottom:var(--img-gap)}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.benefit{background:linear-gradient(45deg,#ec0068 0%,#ed1b7f 100%);color:white;border-radius:20px;padding:16px 16px 24px}
.benefit:nth-child(1)>img{margin-left:-14px}.benefit:nth-child(2)>img{margin-left:-6px}.benefit:nth-child(3)>img{margin-left:-7px}
.benefit>img{width:auto;height:64px;margin-bottom:8px}
.benefit h3{font-size:16px;margin-bottom:10px;line-height:1.2;font-family:var(--body-font);letter-spacing:1px}
.benefit p{font-size:14px;line-height:1.2}
html:lang(en) .benefit h3{font-weight:500;letter-spacing:1px}

/* Merchant carousel: Swiper 5.3.8 set up as the live Divi Pixel carousel (TASK-0005).
   Boxes copy the live computed styles. Every merchant remains available without JavaScript. */
.merchant-section{padding:40px 0 24px;text-align:center}
.merchant-section h2{font-family:var(--heading-font);font-size:24px;margin-bottom:10px;letter-spacing:1.5px}
html:lang(en) .merchant-section h2{letter-spacing:1.5px}
.merchant-section .wide{width:100%}
.carousel{display:flex;padding:30px}
.carousel:not(.swiper-container-initialized){overflow-x:auto}
.merchants{display:flex;position:relative;z-index:1;width:100%;box-sizing:content-box;transition-property:transform;transition-timing-function:linear}
.merchant{flex-shrink:0;width:20%;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;transition-property:transform}
.merchant img{display:block;max-width:50%;height:auto}
@media(max-width:980px){.merchant-section .wide{padding:0 80px}.merchant{width:33.3333%}}
@media(max-width:767px){.merchant-section .wide{padding:0}.carousel{padding:16px 30px}.merchant{width:50%}}
.previous{transform:rotate(180deg)}

/* Product stories and image cards. */
.products{padding:56px 0 40px}
/* Live: the eyebrow and title are text modules with 16px padding on both sides. */
.products .eyebrow,.products .section-title{padding-inline:16px}.products .section-title{margin-bottom:34px}
.comparison-grid{display:grid;grid-template-columns:2fr 3fr;gap:24px}
/* Live: the text starts 300px below the card top; cards in a row stretch to the taller one, text at the bottom. */
.comparison{border-radius:20px;padding:30px;color:white;display:flex;flex-direction:column;justify-content:flex-end;background-size:cover;background-position:center}
.comparison.before{background-image:url('../images/alone-section-grayscale.webp'),linear-gradient(#fff 70%,#000 100%);background-blend-mode:multiply}
.comparison.after{background-image:url('../images/change-section-color.webp'),linear-gradient(#fff 70%,#000 100%);background-blend-mode:multiply}
.comparison h3{font-family:var(--heading-font);font-size:33px;line-height:1.2;margin:300px 0 0;padding-bottom:10px}
.comparison p{font-size:16px;line-height:1.2}
/* Live: the row's 40px bottom padding and its 24px bottom margin follow the last caption. */
.accept-payments{padding:80px 0 64px}
.accept-payments .section-title{padding-inline:16px}
.payment-stories{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.payment-stories img{width:100%;border-radius:20px;margin-bottom:var(--img-gap)}
.payment-stories>article>img{height:auto;aspect-ratio:588/700;object-fit:cover}
.payment-stories>div>article>img{aspect-ratio:588/312;object-fit:cover}
/* Live: each caption is a text module 16px below its photo with a 24px gap after it, except the last in a column. */
.payment-stories .caption{padding:16px 16px 24px;letter-spacing:.15px}
.payment-stories>article>.caption,.payment-stories>div>article:last-child>.caption{padding-bottom:0}
.payment-options{text-align:center;padding:40px 0 80px}
/* Live: the title and the line below it are text modules with 16px side padding. */
.payment-options .section-title{margin-bottom:10px;padding-inline:16px}
.payment-options .section-intro{padding-inline:16px}
/* Live: WP Grid Builder "metro" cards, 8/6/4 across with a 50/50/20px gutter at >1024/>640/≤640 px window width;
   a row is floor(0.75 × card width − gutter / 4) px tall. */
.payment-options .container{container-type:inline-size}
.payment-logos{--n:8;--g:50px;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:var(--g);margin:40px 0;
 grid-auto-rows:round(down,calc((100cqw - (var(--n) - 1) * var(--g)) / var(--n) * .75 - var(--g) / 4),1px)}
.payment-logos img{width:100%;height:100%;object-fit:contain}
@media(max-width:1024px){.payment-logos{--n:6}}
@media(max-width:640px){.payment-logos{--n:4;--g:20px}}
.photo-link{display:block}
.photo-link:hover{opacity:.9}
.device-options{display:grid;grid-template-columns:repeat(3,29.6667%);column-gap:5.5%;align-items:center}
.device-image{width:100%;height:auto;margin-bottom:var(--img-gap)}
.payment-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.payment-modes article,.payment-extras article{border:1px solid var(--pink);border-radius:20px;padding:20px}
.payment-modes h3{color:#262626;font-size:20px}
/* Live: the 80px icon keeps its size and stays centred even when the card is narrower. */
.payment-modes .photo-link{display:flex;justify-content:center}
.payment-modes img{height:80px;width:80px;max-width:none;flex:none;object-fit:contain}
.payment-extras{color:var(--muted);display:grid;gap:16px;text-align:left}
.payment-extras article{display:flex}
/* Live: image and text each take half the card; the text has an empty 14px line above and below. */
.payment-extras article>*{flex:1 1 0;min-width:0}
.payment-extras article>div{display:flex;flex-direction:column;justify-content:center}
/* The image is square, or as tall as the card when the text is taller, centred as the live background image is. */
.payment-extras .photo-link{display:flex}
.payment-extras img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.payment-extras h3{color:#262626;font-size:20px}
.payment-extras p{margin-block:16.8px;color:var(--ink)}
@media(max-width:1024px){.payment-modes,.payment-extras{gap:10px}}
/* Live Grid Builder: 4 payment modes and 2 extras per row from 976px down (the Divi stacking starts at 980px). */
@media(max-width:976px){.payment-modes{grid-template-columns:repeat(4,minmax(0,1fr))}.payment-extras{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Live: a Divi Pixel carousel, 24px above and below the slides; each caption has 20px padding and a 15px margin. */
.settlement{padding:40px 0}
.settlement .section-title{padding:0 16px 10px;margin-bottom:0}
/* Live Swiper settings: 3 slides in view at ≥981px, 2 at 768–980px, 1 below; 30px apart. */
.settlement-grid{--n:3;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--n) - 1) * 30px) / var(--n));gap:30px;padding:24px 0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.settlement-grid article{scroll-snap-align:start}
@media(max-width:980px){.settlement-grid{--n:2}}
@media(max-width:767px){.settlement-grid{--n:1}}
.settlement-grid img{width:100%;height:auto;border-radius:16px}
.settlement-grid .caption{padding:20px 20px 35px}

/* Reporting and support. */
.services{background:var(--paper);padding:50px 0}
.service-panel{display:grid;gap:40px;padding:40px;border-radius:30px;background:white;align-items:center}
.service-panel+.service-panel{margin-top:50px}
/* Live: 2/5 + 3/5 columns, both centred; the title's margin is Divi's 7.493% of the column width. */
.insights{grid-template-columns:36.7% 57.8%;column-gap:5.5%}
.insights .section-title{padding-bottom:10px;margin-bottom:7.493%}
.support{grid-template-columns:3fr 2fr;align-items:start}
.support .section-title{margin-bottom:50px}
.support .service-item>img{margin-bottom:8px}
.panel-image{width:100%;border-radius:20px;margin-bottom:var(--img-gap)}
.service-item+.service-item{margin-top:24px}
.service-item>img{width:64px;height:64px;object-fit:contain;margin-bottom:10px}
.service-item .caption{line-height:1.2}
.service-item .caption p:first-child:not(:last-child){font-size:12px;color:var(--pink);text-transform:uppercase;letter-spacing:.4px}
.support .service-item+.service-item{margin-top:40px}

/* Events, signup, and native, keyboard accessible FAQ. */
/* Live: the events rows are full width up to 1280px; 90px of the section's paper colour lies below the cards. */
.events{background:var(--paper);padding:40px 0 90px}
.events .wide{width:100%}
.events .section-title{margin-bottom:10px}
/* Live: a WP Grid Builder carousel, 3 cards in view, 2 at ≤1024px and 1 at ≤640px window width, 16px apart;
   its script rounds each card's width up to 0.1px. */
/* The 30px bottom padding, taken back by the margin, keeps a photo that runs past its card (see site.js) from being clipped by the scroll box. */
.event-grid{--n:3;display:grid;grid-auto-flow:column;grid-auto-columns:round(up, (100% - (var(--n) - 1) * 16px) / var(--n), .1px);gap:16px;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:30px;margin-bottom:-30px}
.event-card{scroll-snap-align:start}
@media(max-width:1024px){.event-grid{--n:2}}
@media(max-width:640px){.event-grid{--n:1}}
/* Live: only the card's white box is rounded; the photo has square corners and is not clipped. */
.event-card{border-radius:20px;background:white;display:flex;flex-direction:column}
.event-copy{padding:20px 24px 39.2px;flex:1}
/* Live Grid Builder blocks: the icon sits on a text line (1.4, or the Thai page's 1.2), which leaves a gap below it;
   label and date are 8px apart; date and place are two pieces 4px apart, at 0.875 of 14px. */
.event-meta{display:flex;gap:4px 8px;align-items:flex-start}
.event-icon{display:block;line-height:1.4}
html:lang(th) .event-icon{line-height:1.2}
/* Live: the icon keeps its 40px only while there is room; a wrapped date squeezes it. */
.event-icon img{display:inline}
.icons-pending .event-icon img{width:1px;height:1px}
.event-meta>div{display:flex;flex-direction:column;flex-wrap:wrap;gap:8px;align-items:flex-start}
.event-meta p{color:var(--ink);letter-spacing:.5px}
.event-date{display:flex;gap:0 4px;font-size:14px;line-height:1;letter-spacing:0;text-transform:uppercase}
.event-date span{font-size:.875em;line-height:1em;font-weight:300;color:#7b7a77}
html:lang(th) :is(.event-date,.event-date span){line-height:1.2;font-weight:400}
.event-card h3{color:#262626;font-size:20px;margin:10px 0 19.2px;letter-spacing:normal}
.event-card p{line-height:1.2}
/* Live: paragraphs in a card are one empty 19.2px line apart. */
.event-copy p+p{margin-top:1.2em}
.event-card .photo-link img{width:100%;height:auto}
/* Live: one 4/4 column, 40px 10px padding; the gaps below the subtitle, steps and button are Divi's 2.75% of the column. */
.register{background:var(--paper);padding:0}
.register-panel{background:linear-gradient(#ed1b7f 0%,#ed559e 100%);color:white;border-radius:20px;padding:40px 10px;text-align:center}
.register-panel .section-title{padding-bottom:10px;margin-bottom:10px}
.register-panel h3{font-size:24px;line-height:1.2;padding-bottom:10px}
.steps{display:flex;justify-content:center;align-items:center;gap:5px;list-style:none;margin:2.75% 0;padding:0;font-size:14px}
.steps li{display:flex;gap:5px;align-items:center}
.steps li:not(:last-child)::after{content:"";display:block;width:40px;height:40px;background:url('../images/chevron-right_outline-light.webp') center/contain no-repeat}
.step-number{font-size:33px}
/* CR-0004 R-6: English desktop step text is larger than the Thai 14px, which reads small in Barlow. */
@media(min-width:981px){html:lang(en) .steps{font-size:20px}}
.button-white{background:white;color:var(--pink);letter-spacing:normal}
.button-white:hover{background:white}
.register-panel .button-white{margin-bottom:2.75%;padding:12px 16px;border-radius:16px;min-height:0}
.register-note{font-size:12px}
/* Live: Divi toggles, 0 20px 20px padding, a 1px bottom border and Divi's 2.75% module gap below each (30px at ≤980). */
.faq{background:var(--paper);padding:40px 0}
.faq .container{width:100%}
.faq .section-title{text-align:center;padding-bottom:10px;margin-bottom:24px}
/* Live Divi toggles: the padding is on the item, 20px below the title line and 20px above the answer.
   The arrow is a 30px icon glyph, 7px past the title's 50px right padding, centred on the title.
   Opening slides the answer down over 0.7s; the title turns #333 and the arrow flips when it ends (site.js). */
.faq details{border-bottom:1px solid #d9d9d9;margin-bottom:2.75%;padding:0 20px 20px}
.faq details:last-of-type{margin-bottom:0}
.faq summary{cursor:pointer;position:relative;font-size:24px;line-height:1.2;letter-spacing:1px;padding:0 50px 0 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:-7px;top:50%;margin-top:-15px;width:31px;height:30px;background:url(../images/toggle-closed.svg) no-repeat}
.faq details[open]:not(.is-opening) summary{color:#333}
.faq details[open]:not(.is-opening) summary::after{background-image:url(../images/toggle-open.svg)}
.faq-answer{padding-top:20px;font-size:16px;line-height:1.2;color:var(--ink)}

/* About page. Source photographs and copy are unchanged. */
/* Live: a 90% row with 40px padding and two 47.25% columns 5.5% apart; the text group is centred on the photo.
   Gaps under the title and the first value are Divi's 5.82% of the column. */
.about-hero{padding:120px 0 50px}
.about-hero .container{display:grid;grid-template-columns:47.25% 47.25%;grid-template-rows:1fr auto auto auto 1fr;column-gap:5.5%;padding:40px}
.about-hero .eyebrow{grid-column:1;grid-row:2;margin:0;padding-bottom:10px;letter-spacing:-.5px}
.about-hero .section-title{grid-column:1;grid-row:3;font-size:48px;padding-bottom:10px;margin-bottom:5.82%;letter-spacing:1.5px}
.about-hero-image{grid-column:2;grid-row:1/-1;align-self:center;width:100%;height:auto;border-radius:20px;margin-bottom:var(--img-gap)}
.about-values{grid-column:1;grid-row:4}
.about-values .caption{font-size:24px;line-height:1.2}
.about-values .service-item+.service-item{margin-top:5.82%}
/* Live: two full-bleed photo sections with 80px side padding; the text rows are 80vh tall (60vh on phones),
   centred. The first section sticks to the top and the second slides over it. */
.story{background-size:cover;background-position:center;background-blend-mode:screen;background-color:#d3d3d3;text-align:center;padding:0 80px}
.story .container{width:90%;padding-inline:0}
.story-before{background-image:url('../images/tally-why-we-start-1-scaled.webp');padding-top:40px;position:sticky;top:0;z-index:10}
.story-before .section-title{padding-bottom:10px;margin-bottom:0}
.story-before .story-copy{height:80vh;padding-bottom:40px;align-content:center}
/* Live: an empty paragraph after the first line adds one more 24px gap there. */
.story-before .story-copy p:first-of-type{margin-top:24px}
.story-after{background-image:url('../images/tally-why-we-start-2-scaled.webp');padding-block:40px;position:relative;z-index:20}
.story-after .story-copy{height:80vh;align-content:center}
.story-copy{font-size:24px;line-height:1.2;color:var(--muted);letter-spacing:.1px}
/* Live: the story is muted grey; marked phrases are a darker #484644. */
.story-copy .story-ink{color:#484644}
.story .section-title{letter-spacing:1.5px}
.story-copy p{margin:0 0 24px}
.story-copy p:last-child{margin-bottom:0}

/* Footer and transient notices. No cookies or persistent browser storage. */
/* Live: 10px section padding plus the row's 40px above the columns. */
.site-footer{padding:50px 0 40px}
.footer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding-bottom:20px;border-bottom:2px solid var(--paper);color:var(--muted)}
.footer-grid p+p{margin-top:16px}
.footer-grid a{color:var(--ink)}
/* CR-0002 R-9: the LINE button takes the hero button's colours; the address breaks after its @, not at the hyphen. */
.footer-grid .footer-line{color:white;min-height:0;padding:10px 20px;border-radius:15px}
.line-qr{display:block;width:120px;height:120px}
.footer-email{overflow-wrap:anywhere}.footer-email .nowrap{white-space:nowrap}
/* Live: the first and last footer columns have 10px inner padding at every width. */
.footer-brand{padding-left:10px}.footer-grid>div:last-child{padding-right:10px}
.footer-brand img{width:117px;max-height:150px;object-fit:contain}
.footer-logo-mobile{display:none}
.copyright{font-size:12px;padding-top:11.1px;color:var(--muted)}
/* Live: a 360px (300px at ≤980) row with 10px side padding; the text left, a 40px close icon at the right end. */
/* Live: the notice stays above everything, the image viewer included. */
.privacy-notice{position:fixed;z-index:9999999;bottom:20px;left:10%;width:360px;display:flex;align-items:center;justify-content:space-between;border-radius:20px;background:var(--paper);padding:0 10px;max-width:calc(100% - 40px);min-height:42.2px;font-size:12px;line-height:1.2}
.privacy-notice .icon-button{width:40px;min-width:40px;height:42.2px;min-height:0;padding:0;flex-shrink:0}
@media(max-width:980px){.privacy-notice{width:300px}}
/* Image viewer, after the live WP Grid Builder lightbox: a non-modal layer with a dark gradient over the page (which still scrolls),
   the photo centred with 6px corners and a shadow, a "1 / 3" counter, and 40px white buttons at 0.8 opacity.
   It fades in and out over 0.25s; each photo bounces in over 0.6s. site.js sizes the photo. */
.image-viewer{position:fixed;z-index:99999;inset:0;margin:0;border:0;padding:0;width:100%;height:100%;max-width:none;max-height:none;overflow:hidden;
 background:linear-gradient(180deg,#1e1e1e73 0%,#1e1e1ee6 100%);color:#fff;letter-spacing:normal;cursor:grab;
 opacity:0;transition:opacity .25s ease,display .25s allow-discrete,overlay .25s allow-discrete}
.image-viewer[open]{display:flex;align-items:center;justify-content:center;opacity:1}
@starting-style{.image-viewer[open]{opacity:0}}
.image-viewer figure{position:relative;margin:0;padding:0}
.viewer-image{display:block;width:100%;max-width:none;border-radius:6px;box-shadow:0 8px 50px 0 #1e1e1e80;animation:viewer-bounce-in .6s cubic-bezier(.19,1.59,.49,.96)}
@keyframes viewer-bounce-in{0%{opacity:0;transform:scale(1)}1%{opacity:.2;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.viewer-counter{position:absolute;top:0;left:0;height:44px;padding:14px;font-size:14px;line-height:16px}
html:lang(th) .viewer-counter{line-height:1.2}
.image-viewer button{position:absolute;display:block;width:40px;height:40px;margin:0;padding:0;border:0;background:transparent;color:#fff;opacity:.8;cursor:pointer;transition:opacity .25s ease-in-out;appearance:none}
.image-viewer button:hover{opacity:1}
.image-viewer button svg{display:block;fill:none;stroke:currentColor;stroke-width:2.5;pointer-events:none}
.image-viewer :is(.viewer-prev,.viewer-next){left:0;margin:0 8px}
.image-viewer .viewer-next{left:auto;right:0}
.viewer-next svg{transform:rotate(180deg)}
.image-viewer .viewer-close{top:0;right:0;padding:6px}
.image-viewer .viewer-close svg{stroke-width:3.5}

/* English pages. The source sets English headings to line-height 1 and some text to other weights. */
html:lang(en) :is(.desktop-nav a,.eyebrow,.section-title,.hero-note,.benefit h3,.merchant-section h2,.comparison h3,.register-panel h3,.faq summary){line-height:1}
html:lang(en) :is(.language-switch a,.contact-button,.hero-cta,.button-white){line-height:1.7}
html:lang(en) .contact-button{letter-spacing:.8px}
html:lang(en) .language-switch a{line-height:27.2px}
html:lang(en) :is(.about-hero .section-title,.about-values .caption,.story .section-title,.story-copy){line-height:1.5}
html:lang(en) .story .section-title{font-family:var(--body-font)}

html:lang(en) .hero-cta{letter-spacing:1.25px}
html:lang(en) .button-white{letter-spacing:normal}
html:lang(en) .hero-note{font-weight:500;letter-spacing:.15px}
html:lang(en) :is(.register-panel h3,.faq summary){font-weight:500}
/* Live English headings ask for weight 500 or 300. Quattrocento has one weight, so neither changes the look. */
html:lang(en) :is(#cws-products .section-title,#service .section-title,#cws-events .section-title,#register .section-title,#cws-faq .section-title){font-weight:500}
html:lang(en) :is(#cws-products h3:not(.section-title),#accept-payments .section-title,#payment-options .section-title,#settlement .section-title){font-weight:300}
html:lang(en) .comparison p{line-height:1.5}
html:lang(en) .payment-stories .caption{line-height:1.5}
html:lang(en) :is(.payment-modes h3,.payment-extras h3,.event-card h3){line-height:1.4}
html:lang(en) :is(.benefit p,.payment-modes h3,.payment-extras h3,.event-meta small){font-weight:300}
html:lang(en) .footer-grid p{line-height:1.8}
html:lang(en) .footer-grid>div:nth-of-type(3) p{line-height:1.2}
/* English live header: the buttons are 51.2px and 47.2px tall (27.2px lines), so the row is 67.2px. */
html:lang(en) .navigation{min-height:67.2px}
/* English live notice: the text is centred in a 300px box; the row is 44.2px. */
html:lang(en) .privacy-notice{min-height:44.2px}
html:lang(en) .privacy-notice p{flex:1;text-align:center}
html:lang(en) .privacy-notice .icon-button{height:44.2px}
/* English live extras cards: the empty lines around the text are 14px × 1.6. */
html:lang(en) .payment-extras p{margin-block:22.4px}
html:lang(en) .footer-grid>div:last-child p{line-height:1.2}






/* Tablet and phone (≤980px), from the live tablet rules: the rows stack at full width inside each
   section's side padding. Phone values follow in the ≤767px block. */
@media(max-width:980px){
 .wide,.container{width:100%}
 .desktop-nav,.nav-actions>.language-switch{display:none}
 .menu-toggle{display:inline-flex;padding:0;width:48px;height:48px;min-width:48px;min-height:48px;background:none;border-radius:0}.menu-toggle img{width:48px;height:48px}
 .brand img{content:url('../images/mobile-logo.svg');width:93px;height:48px}
 .nav-pill{padding:0;height:auto;background:none;backdrop-filter:none;border-radius:0}.brand{padding-right:0}
 /* The hero's last row gains 16px at exactly 980px; its 24px is inside the copy's own margins. */
 .hero{padding:60px 80px calc(var(--row-pb) - 24px)}
 .hero-main{display:flex;flex-direction:column;padding:24px 0}
 .hero-copy{display:contents}
 .hero .eyebrow{order:0}.hero h1{order:1}
 .hero-image{order:2;width:auto;max-width:100%;align-self:flex-start}
 .hero-cta,html:lang(en) .hero-cta{order:3;margin:40px auto;letter-spacing:normal}
 .hero-note{order:4}
 /* Each live card column keeps a 20px bottom margin, the last row too. */
 .benefits{grid-template-columns:repeat(2,1fr);gap:20px 15px;padding:24px 0 44px}
 /* Two across: the third card takes the whole row rather than leave a hole (CR-0002 R-3). */
 .benefit:last-child:nth-child(odd){grid-column:1/-1}
 .merchant-section{padding:var(--row-pt) 0 var(--row-pb)}
 .products{padding:calc(40px + var(--row-pt)) 80px calc(40px + var(--row-pb))}.products .container{padding-inline:40px}.products .section-title{margin-bottom:58px}
 .comparison-grid{grid-template-columns:1fr;gap:30px}
 .accept-payments{padding:calc(80px + var(--row-pt)) 0 calc(64px + var(--row-pb))}.accept-payments .section-title{margin-bottom:58px}
 .payment-stories{grid-template-columns:1fr;gap:30px}.payment-stories .caption{font-size:18px;padding-bottom:0}
 .payment-stories>div>article+article{margin-top:24px}
 .payment-options{padding:var(--row-pt) 20px var(--row-pb)}.payment-options .section-intro{font-size:22px}
 .payment-logos{margin:88px 0}
 .device-options{display:flex;flex-direction:column}
 /* Live: the photo keeps its own 784px width at most, centred in its column. */
 .device-image{order:0;align-self:flex-start;width:min(97.5%, 784px);margin:0 0 calc(61px + var(--img-gap)) calc(2.5% + max(0px, (97.5% - 784px) / 2))}
 .payment-modes{order:1;width:97.5%;margin:0 0 30px 2.5%}
 .payment-extras{order:2;width:97.5%;margin:0 0 30px 2.5%}
 .settlement{padding:calc(50px + var(--row-pt)) 80px var(--row-pb)}
 .services{padding:50px 0}.service-panel{display:flex;flex-direction:column;gap:30px;padding:24px 30px 50px;border-radius:30px}
 .insights .panel-image{order:-1}.insights{padding:var(--row-pt) 30px 50px}.support{padding:50px 30px var(--row-pb)}
 .service-panel{align-items:stretch}
 /* Live: the column is indented 2.5% of the panel's inner width. */
 .insights>*{margin-left:2.5%}.insights .panel-image{width:97.5%}
 .insights .section-title{margin-bottom:30px}.insights>div{margin-bottom:30px}
 .events{padding:var(--row-pt) 80px calc(50px + var(--row-pb))}.events .section-title{margin-bottom:34px}
 /* Register: the live tablet steps stack, 24px apart; module gaps are a flat 30px. */
 .privacy-notice{font-size:11px}
 /* English live step numbers keep the 14px text line (16.8px), so the rows are shorter. */
 html:lang(en) .step-number{line-height:16.8px}
 .register{padding:40px 0}.register-panel{padding:var(--row-pt) 10px var(--row-pb)}
 .register-panel .section-title{font-size:30px}.register-panel h3{font-size:24px}
 .steps{flex-direction:column;gap:24px;margin:30px 0;font-size:18px}.steps li{align-items:flex-start}.steps li:not(:last-child)::after{display:none}.step-number{font-size:24px}
 .register-panel .button-white{margin-bottom:30px}
 .faq{padding:calc(40px + var(--row-pt)) 0 calc(40px + var(--row-pb))}.faq .section-title{margin-bottom:48px}.faq details{margin-bottom:30px}
 .story .container{width:100%}
 .story-before{padding-top:var(--row-pt)}.story-before .section-title{margin-bottom:24px}.story-before .story-copy{padding-block:24px var(--row-pb)}.story-after{padding-block:var(--row-pt) var(--row-pb)}
 /* About tablet: one column, the photo between the title and the values. */
 /* The two live columns keep their 30px and 1px heights below the text; the stories start 50px lower. */
 .about-hero{padding:var(--row-pt) 80px calc(81px + var(--row-pb))}
 .about-hero .container{display:flex;flex-direction:column;padding:0 40px}
 .about-hero .eyebrow{font-size:28px}
 .about-hero .section-title{margin-bottom:30px}
 .about-hero-image{order:1;width:auto;max-width:100%;align-self:flex-start;margin-bottom:calc(30px + var(--img-gap))}
 .about-values{order:2}.about-values .service-item+.service-item{margin-top:30px}
 /* Footer: two columns 5.5% apart, 30px below each, the small logo beside the contact column. */
 .site-footer{padding:calc(10px + var(--row-pt)) 20px calc(10px + var(--row-pb))}
 .site-footer>*{width:var(--divi-row);margin-inline:auto}
 .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:5.5%;row-gap:30px;padding-bottom:16px}
 .footer-logo-desktop{display:none!important}.footer-brand .footer-logo-mobile{display:block;width:132px;height:24px}
 .copyright{padding-top:15px}
}
/* Tablet only (768–980px): the live tablet header bar, fixed at the top. */
@media(min-width:768px) and (max-width:980px){
 /* The bar is one Divi row: 50px at most, unless its two row paddings are larger (80px at exactly 980px). */
 :root{--tablet-bar:max(50px, var(--row-pt) + var(--row-pb))}
 main{padding-top:calc(var(--tablet-bar) - 4px)}
 .contact-button{display:none}
 .navigation{position:absolute;top:0;left:0;right:0;height:var(--tablet-bar);margin:0;display:block}
 .nav-pill{position:absolute;left:0;top:var(--row-pt)}
 .nav-actions{position:absolute;top:calc(5px + var(--row-pt));left:calc(50% + 150px);right:0;display:flex;justify-content:space-between;align-items:flex-start;gap:0}
 .tablet-line img{width:48px;height:48px}
 .tablet-register{min-height:0;padding:13px 20px 14px;border-radius:12px;font-size:12px;line-height:1.2;letter-spacing:normal;background:rgba(237,27,127,.85);backdrop-filter:blur(5px)}
}
@media(max-width:767px),(min-width:981px){.tablet-line,.tablet-register{display:none}}
@media(min-width:768px) and (max-width:980px){html:lang(en) .tablet-register{font-family:Kanit,Helvetica,Arial,sans-serif;line-height:1.7;letter-spacing:normal}}

/* Phone: the live phone layout applies at 767px and below. */
@media(max-width:767px){
 html{scroll-padding-top:100px}
 /* Live phone header: at the top once the banner is closed, 16px in from each side, two half-width columns. */
 .navigation{position:absolute;top:0;left:16px;right:16px;width:auto;margin:0;padding:8px 0;min-height:0;display:flex;align-items:stretch}
 .navigation.wide{width:auto}
 .nav-pill{flex:0 0 50%;align-items:center}
 .nav-actions{flex:0 0 50%;justify-content:flex-end;align-items:flex-start;gap:8px;padding-top:5px}
 .contact-button{border-radius:12px;padding:16px 20px;border:0;font-size:16px;line-height:1.2;letter-spacing:normal}
 /* The menu opens below the 106px + 72.2px header bar. */
 .hero{padding:120px 20px 0}
 .hero .eyebrow{font-size:16px;margin-top:80px}
 .hero h1{font-size:48px}
 .hero-note{font-size:16px;padding:0 24px 10px}
 .benefits{padding:0 24px 44px}
 .merchant-section{padding:24.3px 0 23.8px}.merchant-section h2{font-size:24px;margin-bottom:10px}
 .products{padding:64px 0 24px}.products .container{padding-inline:24px}
 .products .eyebrow,.products .section-title{padding-inline:0}
 .products .eyebrow{font-size:16px}.products .section-title{font-size:33px;margin-bottom:34px}
 .comparison h3{font-size:24px}.comparison p{font-size:14px}
 .accept-payments{padding:64px 0}.accept-payments .container{padding-inline:24px}
 .accept-payments .section-title{padding-inline:0;font-size:38px;margin-bottom:34px}
 .payment-stories .caption{padding-inline:8px;font-size:14px}
 .payment-options{padding:24px 0 48px}.payment-options .container{padding-inline:24px}
 .payment-options .section-title{font-size:30px}.payment-options .section-intro{font-size:16px}
 .payment-logos{margin:72px 0 40px}
 .device-options{align-items:stretch}
 .device-image{width:50%;margin-left:25%}
 .payment-modes,.payment-extras{width:100%;margin-left:0}
 /* Live Grid Builder cards: below 768px the extras card stacks its image over the text. */
 .payment-extras article{flex-direction:column}.payment-extras article>*{flex:none}.payment-extras .photo-link{display:block}
 .settlement{padding:24px 0}.settlement .container{padding-inline:24px}
 .settlement .section-title{font-size:30px}
 .services{padding:24px}.service-panel{padding:24px 24px 40px;border-radius:30px;gap:30px}
 /* Live phone: an empty 1px column with a 30px margin, then the image above the text. */
 .insights{padding-top:55px}.insights>*{margin-left:0}.insights .panel-image{width:100%;margin-bottom:var(--img-gap)}
 .support{padding:0 16px 24px;margin-top:24px}.support .panel-image{margin-inline:-16px;width:calc(100% + 32px);max-width:none}
 .service-panel .section-title{font-size:24px}
 .service-panel+.service-panel{margin-top:24px}.support{margin-bottom:24px}
 .support>div{padding:0 16px 24px}.support .section-title{margin-bottom:34px}.support .service-item .caption{font-size:16px}
 .service-item+.service-item,.support .service-item+.service-item{margin-top:24px}
 .service-item>img{width:40px;height:40px}.support .service-item>img{width:48px;height:48px}
 .events{padding:24px 20px}.events .eyebrow{font-size:14px}.events .section-title{font-size:24px}
 .register{padding:40px 0}
 .register-panel .section-title{font-size:24px;padding:16px 16px 10px}.register-panel h3{font-size:16px;padding:0 16px 10px}
 .steps{font-size:14px}.register-note{padding:0 16px 16px}
 .faq{padding:64px 0}.faq .container{padding-inline:20px}.faq .section-title{font-size:24px}
 .faq details,.faq details:last-of-type{margin-bottom:16px;padding:0 0 16px}.faq summary{font-size:16px}.faq-answer{font-size:14px}
 .about-hero{padding:204px 0 55px}.about-hero .container{padding:0 24px}
 .about-hero .eyebrow{font-size:20px}.about-hero .section-title{font-size:34px}
 .about-values .caption{font-size:16px}.about-values .service-item>img{width:40px;height:40px}
 .story{padding-inline:0}
 .story .section-title{font-size:26px}.story-copy{font-size:16px;line-height:1.2}.story-copy p{margin-bottom:16px}
 .story-before .story-copy,.story-after .story-copy{height:60vh}
 /* Live: an empty 1px column sits under the cards on phones. */
 .story-before .story-copy p:first-of-type{margin-top:16px}
 .site-footer{padding:34px 0 24px}.footer-grid{font-size:16px;padding-inline:24px}
 .copyright{font-size:12px;line-height:1.2;padding-inline:24px}
 /* Live phone notice: 20% from the left, 300px wide, never past 20px from the right. */
 /* Live: a pop-up wrapper 80% wide (at least 300px) against the right edge; the notice is 20px narrower, 300px at most. */
 .privacy-notice{left:calc(100% - max(80%, 300px));width:min(300px, max(80%, 300px) - 20px);font-size:11px;text-align:center}
 /* English phone layout: headings use line-height 1.5; undo the desktop English offsets. */
 html:lang(en) .contact-button{padding:16px 20px;letter-spacing:normal}
 html:lang(en) :is(.section-title,.comparison h3){line-height:1.5}
 html:lang(en) .register-panel .section-title{line-height:1}
 html:lang(en) :is(.events .section-title,.faq .section-title){line-height:1}
}
/* Divi Pixel carousel captions drop to 16px at ≤480px; Divi stacks default columns at ≤479px. */
/* English live header button at ≤450px: 14px text, 11px 15px 10px padding. */
@media(max-width:450px){html:lang(en) .contact-button{font-size:14px;padding:11px 15px 10px}}
@media(max-width:480px){
 .settlement-grid .caption{font-size:16px}
}
@media(max-width:479px){.footer-grid{grid-template-columns:1fr}}
/* Live: the sign-up row gets 24px side margins from 480px down. */
@media(max-width:480px){.register{padding-inline:24px}}
/* Live Grid Builder card styles at ≤576px: 10px padding, small centred icons, 14px titles. */
@media(max-width:576px){
 .payment-modes article,.payment-extras article{padding:10px;align-items:center}
 .payment-modes img{width:40px;height:40px}
 .payment-modes h3,.payment-extras h3{font-size:14px;letter-spacing:normal}
 .payment-extras img{width:64px;height:64px}
 .payment-extras article>div{text-align:center;align-self:stretch}
}
/* The merchant strip is left out: the live strip keeps moving, and Swiper stalls without its transition. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}:not(.merchants),::before,::after{transition:none!important;animation:none!important}}