/* HalusAI public site layout (needs halus.css). Mobile first: 16 px gutters, no
   horizontal scroll at 375 px; wide tables scroll inside their own box. */
.container{width:100%;max-width:1160px;margin:0 auto;padding-inline:16px}
@media (min-width:720px){.container{padding-inline:24px}}
main{display:block}
html{scroll-padding-top:80px}                 /* anchors land below the sticky nav */
section{padding-block:56px}
@media (min-width:900px){section{padding-block:80px}}
h1,h2,h3{letter-spacing:-.03em;line-height:1.1;text-wrap:balance;margin:0}
h1{font-size:clamp(34px,6vw,58px);font-weight:700}
h2{font-size:clamp(26px,3.6vw,38px);font-weight:700}
h3{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
p{margin:0}
.muted{color:var(--dim)}
.small{font-size:13px}
.center{text-align:center}
/* a silver fade: the ink into a mid grey (3:1 and more for display text on both themes) */
.gradtext{background:linear-gradient(120deg,var(--ink) 30%,#71717a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sechead{max-width:720px;margin:0 auto 36px;text-align:center;display:grid;gap:12px}
.sechead p{color:var(--dim);font-size:17px}
.prose .kicker{margin-bottom:16px}

/* ── top nav ───────────────────────────────────────────── */
.topnav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  background:color-mix(in srgb,var(--bg) 70%,transparent);border-bottom:1px solid var(--line)}
/* light: a near-solid bar, so the dark hero scrolling under it does not turn it grey */
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .topnav{background:color-mix(in srgb,var(--bg) 96%,transparent);border-bottom-color:var(--line)}}
:root[data-theme="light"] .topnav{background:color-mix(in srgb,var(--bg) 96%,transparent);border-bottom-color:var(--line)}
.topnav .container{display:flex;align-items:center;gap:14px;min-height:64px}
.navlinks{display:none;gap:24px;margin-left:20px}
.navlinks a{color:var(--dim);font-weight:500;font-size:14px;transition:color .2s}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--ink);text-decoration:none}
.navright{margin-left:auto;display:flex;align-items:center;gap:10px}
@media (max-width:379px){.navright{gap:6px}.topnav .container{gap:8px}}
.navright .signin{color:var(--dim);font-weight:500;font-size:14px;display:none}
.navright .signin:hover{color:var(--ink);text-decoration:none}
.menubtn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:8px;border:1px solid var(--line2);
  background:transparent;color:var(--ink);cursor:pointer}
.menupanel{border-top:1px solid var(--line);padding:10px 16px 18px;display:grid;gap:4px}
.menupanel a{color:var(--ink);padding:10px 4px;font-weight:500;border-radius:8px}
.menupanel a:hover{text-decoration:none;color:var(--dim)}
/* the theme toggle's row in the menu: only on the smallest phones (below), where the bar has no room for it */
.themerow{display:none;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:0;padding:10px 4px;border:0;
  border-top:1px solid var(--line);border-radius:0;background:none;color:var(--ink);font:500 15.5px var(--sans);text-align:left;cursor:pointer}
.themerow .themename{display:inline-flex;align-items:center;gap:8px;color:var(--dim)}
.themerow .ic{width:18px;height:18px}
.themerow .ti-light,.themerow .ti-dark,
:root[data-theme-mode="light"] .themerow .ti-auto,:root[data-theme-mode="dark"] .themerow .ti-auto{display:none}
:root[data-theme-mode="light"] .themerow .ti-light,:root[data-theme-mode="dark"] .themerow .ti-dark{display:block}
@media (min-width:860px){.navlinks{display:flex}.navright .signin{display:inline}.menubtn,.menupanel{display:none!important}}
@media (max-width:859px){.navright .themebtn{width:40px;height:40px;border-radius:8px;border-color:var(--line2)}.navright .themebtn:focus-visible{border-radius:8px}}   /* a pair with the menu button */
/* under 340 px the bar (brand, toggle, call to action, menu: 307 px) would not fit with its 16 px gutters:
   the toggle moves into the menu */
@media (max-width:339px){:root[data-theme-mode] .navright .themebtn{display:none}:root[data-theme-mode] .menupanel .themerow{display:flex}}

/* ── hero ──────────────────────────────────────────────── */
.hero{padding-block:56px 40px;text-align:center}
/* The landing hero is a dark island in both themes (index.html: class="hero dark-island", the
   tokens in halus.css): the brand's night ground, as on the moodboard's halus.app tile. In dark
   mode the page itself (near-black, its faint top spotlight) shows through it. In light mode it
   paints the black page and the same spotlight itself, and fades into the white page over the gap
   above the paste box (--island-fade, the paste box's top margin): a soft gradient, no line. */
/* no stacking context of its own: the paint (z-index -1) sits over the page's spotlight (-2) and
   under everything else */
.hero.dark-island{position:relative;--island-fade:84px}
.hero.dark-island::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;bottom:calc(-1 * var(--island-fade));
  display:none;pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% 0%,rgba(255,255,255,.05),transparent),
    /* plain black, lifting to a soft zinc as the mask thins it out into the white page */
    linear-gradient(180deg,var(--bg) calc(100% - var(--island-fade) - 60px),var(--panel2) calc(100% - var(--island-fade)),
      var(--line2));
  /* eased, from just above the hero's last line to the paste box's top edge */
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--island-fade) - 40px),rgba(0,0,0,.93) calc(100% - var(--island-fade) - 20px),
    rgba(0,0,0,.78) calc(100% - var(--island-fade)),rgba(0,0,0,.55) calc(100% - var(--island-fade) * .7),rgba(0,0,0,.3) calc(100% - var(--island-fade) * .45),
    rgba(0,0,0,.11) calc(100% - var(--island-fade) * .22),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - var(--island-fade) - 40px),rgba(0,0,0,.93) calc(100% - var(--island-fade) - 20px),
    rgba(0,0,0,.78) calc(100% - var(--island-fade)),rgba(0,0,0,.55) calc(100% - var(--island-fade) * .7),rgba(0,0,0,.3) calc(100% - var(--island-fade) * .45),
    rgba(0,0,0,.11) calc(100% - var(--island-fade) * .22),transparent)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .hero.dark-island::before{display:block}}
:root[data-theme="light"] .hero.dark-island::before{display:block}
@media (min-width:900px){.hero{padding-block:88px 56px}}
.hero h1{max-width:900px;margin:20px auto 0;letter-spacing:-.035em;line-height:1.06}
.hero .lede{max-width:680px;margin:20px auto 0;color:var(--dim);font-size:clamp(16px,2.2vw,19px)}
.hero .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.assure{display:flex;gap:8px 18px;justify-content:center;flex-wrap:wrap;margin-top:22px;color:var(--dim);font-size:13.5px}
.assure span{display:inline-flex;align-items:center;gap:7px}
.assure .ic{color:var(--good)}

/* ── the paste box and sample viewer on the landing page ─ */
.toolbox{max-width:980px;margin:0 auto;padding:18px}
.toolbox textarea{display:block;width:100%;min-height:200px;resize:vertical;background:var(--panel2);color:var(--ink);
  border:1px solid var(--edge);border-radius:10px;padding:14px;font:15px/1.65 var(--sans)}
.toolbox textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}      /* a solid 2 px ring */
.toolrow{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin-top:12px}
.toolrow .spacer{flex:1}
.count{font:500 12.5px var(--mono);color:var(--dim)}
.samples{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.samples .lbl{font:600 11px var(--sans);color:var(--faint);text-transform:uppercase;letter-spacing:.08em;margin-right:2px}
.sampleview{margin-top:16px;display:grid;gap:14px}
@media (min-width:860px){.sampleview{grid-template-columns:1fr 1fr}}
.pane{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:14.5px;line-height:1.75;
  max-height:420px;overflow:auto;overflow-wrap:anywhere}
#sampleBefore,#sampleAfter{white-space:pre-wrap}               /* the text's own line breaks, not the markup's */
.pane .picker{white-space:normal}
.panehead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;
  font:600 11px var(--sans);color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.pane .sen{border-radius:4px;padding:1px 2px;margin:0 -2px;cursor:pointer;text-decoration:underline dotted color-mix(in srgb,var(--dim) 45%,transparent);
  text-underline-offset:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pane .sen:hover,.pane .sen[aria-expanded="true"]{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.pane .sen.custom{background:color-mix(in srgb,var(--ink) 8%,transparent);text-decoration:underline solid color-mix(in srgb,var(--ink) 55%,transparent)}
.picker{margin-top:10px;display:grid;gap:6px}
.picker button{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 12px;color:var(--ink);
  cursor:pointer;font:14px/1.5 var(--sans)}
.picker button:hover{border-color:var(--line2)}
.picker button[aria-pressed="true"]{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,var(--panel));box-shadow:inset 0 0 0 1px var(--ink)}
.dial{display:flex;align-items:center;gap:10px;font:500 12.5px var(--mono);color:var(--dim)}
.dial b{color:var(--ink)}
.caption{color:var(--faint);font-size:12.5px;margin-top:8px}

/* ── grids ─────────────────────────────────────────────── */
.grid{display:grid;gap:16px}
@media (min-width:720px){.grid.g2{grid-template-columns:repeat(2,1fr)}.grid.g3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.grid.g4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:720px) and (max-width:999px){.grid.g4{grid-template-columns:repeat(2,1fr)}}
.feature{display:grid;gap:10px;align-content:start}
.feature .icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--ink);
  background:var(--panel2);border:1px solid var(--line2)}
.feature .icon .ic{width:20px;height:20px}
.feature p{color:var(--dim);font-size:14.5px}
.step{display:grid;gap:10px;align-content:start}
.step .n{font:600 13px var(--mono);color:var(--dim)}
.step p{color:var(--dim);font-size:14.5px}
.split{display:grid;gap:16px}
@media (min-width:860px){.split{grid-template-columns:1fr 1fr}}
.list{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.list li{display:flex;gap:10px;align-items:flex-start;color:var(--dim);font-size:14.5px}
.list li .ic{margin-top:4px;color:var(--good)}
.list.no li .ic{color:var(--bad)}
.note{border:1px solid var(--line);border-left:2px solid var(--dim);background:var(--panel);border-radius:0 10px 10px 0;
  padding:14px 16px;color:var(--dim);font-size:14.5px}
.note b{color:var(--ink)}

/* ── pricing ───────────────────────────────────────────── */
.toggles{display:flex;gap:10px 16px;justify-content:center;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.seg{display:inline-flex;padding:3px;border-radius:10px;border:1px solid var(--line2);background:var(--panel)}
.seg button{border:0;background:transparent;color:var(--dim);font:600 13.5px var(--sans);padding:7px 16px;border-radius:7px;cursor:pointer;transition:color .2s,background .2s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{color:var(--on-accent);background:var(--accent)}
.save{font:600 12px var(--sans);color:var(--good)}
.rmnote{text-align:center;color:var(--faint);font-size:13px;max-width:640px;margin:0 auto 28px}
.rowlabel{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:34px 0 14px}
.rowlabel h3{font-size:19px}
.rowlabel span{color:var(--dim);font-size:14px}
.plans{display:grid;gap:16px}
@media (min-width:720px){.plans.c2{grid-template-columns:repeat(2,minmax(0,380px));justify-content:center}.plans.c3{grid-template-columns:repeat(3,1fr)}}
.plan{display:flex;flex-direction:column;gap:14px;position:relative}
.plan.pop{border-color:color-mix(in srgb,var(--ink) 45%,var(--line2));box-shadow:var(--glow)}
.plan .badge{position:absolute;top:-11px;left:22px}
.plan .name{font-weight:600;font-size:17px}
.price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.price>span{display:inline-flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.price .amt{font-size:38px;font-weight:700;letter-spacing:-.04em}
.price .per{color:var(--dim);font-size:14px}
.plan .sub{color:var(--dim);font-size:13.5px;min-height:20px}
.plan .list{margin-top:2px}
.plan .btn{margin-top:auto;width:100%}
.plan .fine{color:var(--faint);font-size:12px;text-align:center}
[data-int="month"] .yr,[data-int="year"] .mo{display:none!important}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 12px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--dim);background:var(--panel2)}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right}

/* ── FAQ ───────────────────────────────────────────────── */
.faq{max-width:820px;margin:0 auto;display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:4px 2px}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;display:flex;justify-content:space-between;gap:16px;transition:color .2s}
.faq summary:hover{color:var(--dim)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--dim);font:500 20px var(--mono);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details>div{padding:0 0 20px;color:var(--dim);display:grid;gap:10px}
.faqgroup{margin:34px 0 14px;font-size:19px}

/* ── long-form pages (legal, about) ────────────────────── */
.prose{max-width:780px;margin:0 auto;padding-block:48px 72px}
.prose h1{font-size:clamp(30px,4.5vw,42px);margin-bottom:10px}
.prose .updated{color:var(--faint);font-size:13.5px;margin-bottom:28px}
.prose h2{font-size:22px;margin:38px 0 12px}
.prose h3{font-size:17px;margin:24px 0 8px}
.prose p,.prose li{color:var(--dim);font-size:15.5px;line-height:1.75}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 14px}
.prose li{margin:4px 0}
.prose strong{color:var(--ink)}
.prose table{min-width:520px}
.prose .toc{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:28px}
.prose .toc ol{margin:6px 0 0}
.placeholder{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--ink);border-radius:4px;padding:0 4px}

/* ── CTA band and footer ───────────────────────────────── */
.ctaband{text-align:center;display:grid;gap:18px;justify-items:center;padding:44px 22px}
.ctaband p{color:var(--dim);max-width:560px}
.sitefoot{border-top:1px solid var(--line);margin-top:24px;padding-block:48px 32px;background:var(--bg2)}
.footgrid{display:grid;gap:28px}
@media (min-width:720px){.footgrid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.footgrid{grid-template-columns:1.4fr repeat(5,1fr)}}
.footgrid h4{margin:0 0 10px;font:600 12px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.footgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footgrid a{color:var(--dim);font-size:14px;text-decoration:none;transition:color .2s}
.footgrid a:hover{color:var(--ink);text-decoration:none}
.footgrid a.brand{color:var(--ink)}          /* the wordmark keeps the ink, not the links' dim grey */
.biz{color:var(--faint);font-size:13px;line-height:1.7;margin-top:12px}
.footbase{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);display:flex;gap:10px 18px;flex-wrap:wrap;
  justify-content:space-between;color:var(--faint);font-size:12.5px}
.footbase .region b{color:var(--dim);font-weight:600}
.footbase .region a{color:var(--dim);text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:3px}
.footbase .region a:hover{color:var(--ink)}
.footnote{color:var(--faint);font-size:12.5px;margin:22px 0 0}

/* ── the Malaysian page (/my, Bahasa Malaysia, RM) ─────── */
/* a small, simplified Jalur Gemilang beside the hero's kicker (decorative: aria-hidden) */
.flag-my{display:inline-block;width:21px;height:14px;border-radius:2.5px;vertical-align:-2px;margin-right:8px;
  background:radial-gradient(circle at 26% 34%,#ffcc00 0 2.1px,transparent 2.6px) 0 0/50% 57% no-repeat,
             linear-gradient(#010066,#010066) 0 0/50% 57% no-repeat,
             repeating-linear-gradient(#cc0001 0 1px,#fff 1px 2px);
  box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.methods{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 auto 26px}
.methods span{font:600 12.5px var(--sans);color:var(--dim);border:1px solid var(--line2);border-radius:999px;padding:5px 12px;
  background:color-mix(in srgb,var(--panel) 80%,transparent)}

/* ── 404 and small states ──────────────────────────────── */
.state{min-height:60vh;display:grid;place-items:center;text-align:center;padding-block:60px}
.state .code{font:700 72px var(--mono);letter-spacing:-.04em;background:linear-gradient(180deg,var(--ink) 35%,#71717a);-webkit-background-clip:text;background-clip:text;color:transparent}
.state p{color:var(--dim);margin:10px auto 24px;max-width:440px}
/* the H app tile, the quiet brand mark of the 404 and the unsubscribe pages: the kit's own artwork
   (ink tile, paper H), with a hairline ring so the tile's edge shows on the night ground too. 64 px
   is the vector master (halusai-app-icon.svg), 48 px the pixel master (halusai-app-icon-48.svg) */
.hai-tile{display:block;flex:none;width:64px;height:64px;border-radius:14.4px;box-shadow:0 0 0 1px var(--line2)}
.state .hai-tile{margin:0 auto 22px}
.hai-tile.px48{width:48px;height:48px;border-radius:10.8px;margin:0 0 16px}
.reveal{animation:rise .6s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.count.bad{color:var(--bad)}

/* ── the landing hero: the copy, and beside it (below it on phones) one real HalusAI pair ── */
.herogrid{display:grid;gap:28px;align-items:center}
.herocopy{min-width:0}
@media (min-width:960px){
  .herogrid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:48px}
  .hero .herocopy{text-align:left}
  .hero .herocopy h1{margin-left:0;font-size:clamp(40px,4.6vw,56px)}
  .hero .herocopy .lede{margin-left:0}
  .hero .herocopy .ctas,.hero .herocopy .assure{justify-content:flex-start}
}
/* the pair: the stiff sentence in mono, a hairline, the chosen version in the body face. Small mono
   labels, the site's tokens only (the island keeps them dark in both themes) */
.pair{margin:0 auto;width:100%;max-width:520px;text-align:left;display:grid;gap:18px;padding:24px 24px 26px}
.pairrow{display:grid;gap:10px;min-width:0}
.pairrow+.pairrow{padding-top:18px;border-top:1px solid var(--line2)}
.pairlbl{display:flex;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;font:500 11px/1.4 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.pairsrc{margin:0;font:500 14px/1.7 var(--mono);color:var(--dim);overflow-wrap:anywhere}
.pairout{margin:0;font-size:clamp(20px,2.3vw,24px);font-weight:500;line-height:1.35;letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
@media (min-width:960px){.pair{margin:0 0 0 auto}}
/* rewritten sample sentences light up one after another */
.fresh .sen{animation:sen-in 1s var(--ease) calc(var(--i,0) * 55ms)}
@keyframes sen-in{0%{background:color-mix(in srgb,var(--ink) 22%,transparent)}100%{background:transparent}}

.toolbox{position:relative;margin-top:84px}
.whogrid .card{position:relative;display:grid;gap:10px;align-content:start}
.whogrid .card p{color:var(--dim);font-size:14.5px}
.whogrid .tag{font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.ctaband{position:relative}
/* short phones: less room over the headline, so the headline and its buttons fit the screen */
@media (max-width:959px) and (max-height:720px){.hero{padding-top:18px}}
/* the landing page's cards rise into view (site.js marks only the ones below the fold) */
.rise-pre{opacity:0;transform:translateY(28px) scale(.97)}
.rise-pre.rise-in{opacity:1;transform:none;transition:opacity .55s var(--ease) var(--rise,0ms),transform .75s cubic-bezier(.2,1.35,.4,1) var(--rise,0ms)}
@media print{.rise-pre{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fresh .sen{animation:none}}

/* ── buying a pass by DuitNow QR (/my buttons, the order page /my/pesanan/<token>) ── */
.buymsg{margin:8px 0 0;font-size:13.5px;color:var(--bad)}
.buymsg.good{color:var(--good)}
.paychoice{display:grid;gap:8px;margin-top:auto;width:100%}
.paychoice .btn{width:100%}
.plan .paychoice{margin-top:auto}
.buybar{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin:0 0 18px}
.buybar .buymsg{flex:1 1 100%;margin:0}
.container.narrow{max-width:760px}
.orderhero{padding-bottom:20px;text-align:left}
.orderhero .lede{margin:10px 0 0;max-width:none}
.orderhero .ctas{justify-content:flex-start;margin-top:18px}
.mono{font-family:var(--mono);letter-spacing:.02em}
.orderwrap{display:grid;gap:16px}
.orderstate{display:grid;gap:10px;border-left:4px solid var(--line2)}
.orderstate.good{border-left-color:var(--good)}
.orderstate.wait{border-left-color:var(--warn)}
.orderstate.bad{border-left-color:var(--bad)}
.orderstate h2,.paystep h2{font-size:20px}
.orderstate .ctas{justify-content:flex-start}
.paysteps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.paystep{display:grid;gap:12px;min-width:0}
.paystep h2{display:flex;align-items:center;gap:10px}
.paystep .n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;font:700 14px var(--sans);
  color:var(--on-accent);background:var(--accent)}
.qrbox{display:grid;place-items:center;padding:14px;border-radius:12px;background:#ffffff;border:1px solid var(--line);
  justify-self:center;max-width:100%}
.qrbox img{display:block;width:min(280px,100%);height:auto;image-rendering:auto}
.paydetails{display:grid;gap:8px;margin:0}
.paydetails div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.paydetails dt{color:var(--dim);font-size:14px}
.paydetails dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.filepick{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:14.5px}
.filepick input{font:inherit;color:var(--dim);max-width:100%}
.receiptpreview{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--panel2);max-width:100%}
.receiptpreview img{display:block;max-width:100%;max-height:360px;margin:0 auto;border-radius:8px}
.keeplink .chip{margin-left:6px}
.refcard{display:grid;gap:10px;min-width:0}
.refcard h2{font-size:20px}
.refrow{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.refrow input{flex:1 1 180px;min-width:0;padding:12px 14px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);
  color:var(--ink);font:600 16px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.refrow input::placeholder{text-transform:none;letter-spacing:0;font-weight:400}
.sronly{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.refnote{margin:0 0 14px}
.qrsave{display:flex;justify-content:center;margin:0}
.paylater summary{cursor:pointer;font-weight:600;padding:2px 0}
.paylater[open]{display:grid;gap:12px}
.paylater[open] summary{margin-bottom:4px}
/* /login, /auth and /account's Password card: email and password forms (assets/login.js, password-login.js,
   auth.js, account.js, show-password.js). Two tabs on /login (Sign in, Create account), each a full-width half,
   so the pair fits a 375 px phone in either language. */
.authcard p{margin:0;max-width:none}
.authtabs{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:10px;border:1px solid var(--line2);background:var(--panel)}
.authtabs [role="tab"]{min-width:0;border:0;background:transparent;color:var(--dim);font:600 14px/1.25 var(--sans);padding:9px 8px;
  border-radius:7px;cursor:pointer;transition:color .2s,background .2s}
.authtabs [role="tab"]:hover{color:var(--ink)}
.authtabs [role="tab"][aria-selected="true"]{color:var(--on-accent);background:var(--accent)}
.authtabs [role="tab"]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.authview{display:grid;gap:12px;min-width:0}
.authview h2{font-size:20px}
.authform{display:grid;gap:10px;min-width:0}
.authform label{font-size:13px;color:var(--dim)}
.authform input:not([type="checkbox"]){width:100%;min-width:0;padding:12px 14px;border-radius:12px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--ink);font:16px var(--sans)}
.authform input:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.authform input.codein{font:600 22px var(--mono);letter-spacing:6px;text-align:center}
.authform .btn{margin-top:4px;white-space:normal;text-align:center}   /* a long Bahasa Malaysia label wraps on a small phone */
.authform .btn.ghost{margin-top:0}
.authform label.showpw,.authform label.tick{display:flex;gap:10px;align-items:flex-start;cursor:pointer;width:fit-content;max-width:100%}
.authform label.showpw input,.authform label.tick input{margin-top:3px;flex:none}
.authlinks{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
/* a row whose only link is hidden (Sign in's Forgot password? while the bigger button shows) leaves no empty gap */
.authlinks:not(:has(> :not([hidden]))){display:none}
.authagain{display:flex;flex-wrap:wrap;gap:10px}
.authagain .btn{white-space:normal;text-align:center}
/* the view switches (Forgot password?, Back to sign in): buttons that look like links. Not
   #fragment links: login.js follows the fragment of a link from elsewhere (an email's /login#forgot) instead */
.authlinks .linkish{border:0;background:none;padding:2px 0;margin:0;color:var(--ink);font:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-align:left}
.authlinks .linkish:hover{color:var(--dim)}
.authlinks .linkish:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}

/* ── the free Robotic Phrase Finder (assets/phrasefinder.js) and the guides' examples ──
   Colours are tokens only, so both themes follow. A mark is told apart by its line, not by colour alone. */
.rpbox{max-width:980px;margin:0 auto;padding:18px}
.rpbox label{display:block;font-weight:600;margin-bottom:8px}
.rpbox textarea{display:block;width:100%;min-height:220px;resize:vertical;background:var(--panel2);color:var(--ink);
  border:1px solid var(--edge);border-radius:10px;padding:14px;font:15px/1.65 var(--sans)}
.rpbox textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}      /* a solid 2 px ring */
.rpbox .toolrow .chip{min-height:40px}
.rpbox .btn.primary{min-height:44px}
.rp-results{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:12px}
.rp-h{font-size:clamp(20px,3vw,26px)}
.rp-h3{font-size:16px;margin-top:10px}
.rp-pane{max-height:340px}
.rp-text{white-space:pre-wrap;overflow-wrap:anywhere}
.rp-text mark{color:var(--ink);border-radius:3px;padding:0 1px}
.rp-text mark.rp-hit{background:color-mix(in srgb,var(--warn) 24%,transparent);border-bottom:2px solid var(--warn)}
.rp-text mark.rp-mark2{background:transparent;border-bottom:2px dotted var(--ink)}
.rp-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media (min-width:720px){.rp-grid{grid-template-columns:1fr 1fr}}
.rp-item,.rp-row{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:grid;gap:6px;min-width:0}
.rp-item p,.rp-row p{margin:0;overflow-wrap:anywhere}
.rp-rowhead{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.rp-count{font:600 12.5px var(--mono);color:var(--dim)}
.rp-swap{color:var(--ink);font-size:14.5px}
.rp-tag{font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding:3px 9px;
  border-radius:999px;border:1px solid var(--warn)}
.rp-tag.ok{border-color:var(--good)}
.rp-detail{font-size:14.5px}
.rp-long{margin:0;padding-left:20px;font-size:13.5px;color:var(--dim)}
.rp-long li{margin:2px 0}
.rp-end{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:10px;justify-items:start}
.rp-end p{max-width:640px}
.btn.wrap{white-space:normal;text-align:center;line-height:1.35}
@media (max-width:559px){.rp-end .btn{width:100%}}
.eg{display:grid;gap:10px;margin:22px 0;padding:18px 20px}
.eg .eglabel{font:600 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.eg p{margin:0}
.eg .egrobot{color:var(--ink);font-size:15.5px;border-left:3px solid var(--warn);padding-left:12px}
.eg ol{margin:0;padding-left:22px;display:grid;gap:6px}
.eg li{color:var(--ink);font-size:15px;margin:0}
.eg .egnote{color:var(--dim);font-size:13.5px}
.prose .ctas{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.prose .tablewrap{margin:0 0 18px}
.prose .note{margin:0 0 18px}
.prose .faq{margin:0 0 18px}

/* ── the region banner (assets/region.js): / and /pricing offer the Malaysian page to visitors on
   Malaysian time. Fixed at the bottom and added after the page is there, so nothing moves;
   16px from the screen's edges on a phone; theme tokens only, so it follows Light and Dark ── */
.regionbar{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;
  max-width:560px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;
  background:var(--panel2);color:var(--ink);border:1px solid var(--line2);border-radius:var(--radius);
  box-shadow:0 12px 32px -14px rgba(0,0,0,.5);font-size:14.5px;line-height:1.45;animation:regionin .25s var(--ease) both}
.regionbar p{margin:0;flex:1;min-width:0}
.regionbar a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.regionbar-x{flex:none;width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid var(--line2);
  border-radius:8px;background:transparent;color:var(--dim);font:400 20px/1 var(--sans);cursor:pointer}
.regionbar-x:hover{color:var(--ink);border-color:var(--ink)}
.regionbar a:focus-visible,.regionbar-x:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@keyframes regionin{from{opacity:0;transform:translateY(8px)}}
@media print{.regionbar{display:none}}