/* ---------------------------------------------------------------------------
   Slip Tracker website: the shared stylesheet every page loads.

   The material is the SlipTracker design system (design/system/SLIPTRACKER-DESIGN-SYSTEM.md,
   values in design/system/foundation.tokens.json): Wise's principles and verified
   foundation and component rules, drawn in SlipTracker's own identity. Graphite + Ink:
   grey neutrals, the accent in the text colour, Anuphan headings, Noto Sans Thai Looped
   body and labels, Inter money with tabular figures, Phosphor Regular icons.

   Web values come from Wise's web pages, read from the archive on 2026-10-14:
   Typography "Editorial Styles" (Heading 1 to 5, Body 1 to 3, Link 1 to 3), Grid
   (margins 20 / 32 / 40 / 80 / 100, maximum 1440), Radius (mobile 10 / 16 / 24 / 32,
   desktop 16 / 20 / 30 / 40), Marketing spacing (every section 48 on mobile and tablet,
   60 on desktop), Button (large 48, full width on mobile, auto width on desktop, a link
   to go to another page), Segmented control (never 100% wide on desktop), Focus states,
   Markup (links underlined on the web) and Grammar. Thai line heights follow the
   system's rule (at least the face's box or its stacked-mark ink, whichever is taller),
   so Wise's tighter Latin leading is used for Latin only.

   Nothing is coloured for decoration. Cards are flat. Lists are never in cards. Motion is
   quiet (owner, 2026-10-13): one short move for a real event, nothing that rises, pops,
   loops or swells, and all of it stops under Reduce Motion.
   --------------------------------------------------------------------------- */

/* --- faces -------------------------------------------------------------------
   The same TTFs the app bundles, subset by scripts/build-fonts.sh and served from this
   origin. Never a font CDN: a product whose claim is that records stay on the phone must
   not make its own marketing page disclose the visitor's IP. Each face is split into a
   Latin and a Thai file; unicode-range lets a page fetch only the scripts it shows. Keep
   the ranges in step with build-fonts.sh. */

@font-face {
  font-family: "Anuphan";
  src: url("../assets/fonts/anuphan-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  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+0E3F, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

@font-face {
  font-family: "Anuphan";
  src: url("../assets/fonts/anuphan-600-thai.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-family: "Noto Sans Thai Looped";
  src: url("../assets/fonts/noto-looped-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  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+0E3F, 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 Looped";
  src: url("../assets/fonts/noto-looped-400-thai.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-family: "Noto Sans Thai Looped";
  src: url("../assets/fonts/noto-looped-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  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+0E3F, 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 Looped";
  src: url("../assets/fonts/noto-looped-500-thai.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-family: "Noto Sans Thai Looped";
  src: url("../assets/fonts/noto-looped-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  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+0E3F, 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 Looped";
  src: url("../assets/fonts/noto-looped-600-thai.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* Money only: digits, the baht sign and the punctuation an amount uses. Inter has no Thai
   letters, so a word beside an amount stays in the body face. */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-600-money.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0020, U+0025, U+002B-002E, U+0030-0039, U+00A0, U+0E3F, U+2009, U+2022, U+2212;
}

/* Local stand-ins sized to the real faces' Latin width and line box (measured with
   fontTools against Arial on 2026-10-14), so the swap moves nothing on screen. */
@font-face {
  font-family: "Anuphan fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Roboto Bold");
  font-weight: 600;
  size-adjust: 97.1%;
  ascent-override: 105.6%;
  descent-override: 28.3%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Noto fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Roboto");
  font-weight: 400;
  size-adjust: 104.5%;
  ascent-override: 119.6%;
  descent-override: 33.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Noto fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Roboto Bold");
  font-weight: 500 600;
  size-adjust: 101.1%;
  ascent-override: 123.6%;
  descent-override: 34.6%;
  line-gap-override: 0%;
}

/* --- tokens ------------------------------------------------------------------ */

:root {
  color-scheme: light dark;

  /* Colour roles, light (design system §3.1). */
  --canvas: #fcfbf8;
  --surface: #ffffff;
  --inset: #ececec;
  --text: #302d26;
  --muted: #606060;
  --divider: #d8d8d8;
  --control-edge: #757575;
  --action: #302d26;
  --on-action: #fcfbf8;
  --action-pressed: #464646;
  --link: #302d26;
  --selected: #e1e1e1;
  --positive: #28664b;
  --positive-tint: #def5e8;
  /* overlayPressed: the text at 8%, the hover and press layer on rows and quiet controls. */
  --overlay-pressed: rgb(48 45 38 / 0.08);
  /* Category fills are the same in both modes; the glyph on them is dark (§3.3). */
  --cat-grocery: #84c89a;
  --on-category: #302d26;
  /* Floating things only (the language menu, the language note): text at 12%, y 6,
     radius 16 (§6 Elevation). Cards are flat. */
  --float-shadow: 0 6px 16px rgb(48 45 38 / 0.12);
  /* The phone frame: a flat bezel in the ink. */
  --device-bezel: #302d26;
  --device-ring: transparent;

  /* Faces. Japanese and Korean pages use the phone's own CJK face for headings and body
     (design system §4.3); money stays Inter. */
  --font-heading: "Anuphan", "Anuphan fallback", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Noto Sans Thai Looped", "Noto fallback", ui-sans-serif, system-ui, sans-serif;
  --font-money: "Inter", "Noto Sans Thai Looped", "Noto fallback", ui-sans-serif, system-ui, sans-serif;

  /* Type: Wise's editorial scale, fluid from a 390 to a 1440 wide window. The display
     size stops at 64 (Wise's Heading 1 runs to 78) so a Thai headline keeps its line. */
  --fs-display: clamp(2.625rem, 1.9rem + 2.4vw, 4rem);
  --fs-h1: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
  --fs-h2: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --fs-h3: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
  --fs-h4: clamp(1.25rem, 1.18rem + 0.3vw, 1.375rem);
  --fs-lead: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --fs-label: 1rem;

  /* Line heights. Latin takes Wise's; Thai takes the system's floors (Anuphan stacked
     marks 1.39 em, Noto's box 1.6 em); Japanese and Korean sit between. */
  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-title: 1.3;
  --lh-body: 1.55;
  --lh-small: 1.5;

  /* Spacing: the product rhythm inside a block (design system §5) ... */
  --space-tight: 4px;
  --space-text: 8px;
  --space-cards: 12px;
  --space-component: 16px;
  --space-button: 24px;
  --space-sections: 32px;
  /* ... and Wise's grid and marketing spacing between blocks. rem, so it grows with the
     reader's text size. */
  --margin: 20px;
  --page-max: 1440px;
  --section-pad: 3rem;
  --measure: 60ch;

  /* Shape: Wise's mobile radius scale; the desktop scale takes over at 62rem. */
  --r-small: 10px;
  --r-medium: 16px;
  --r-large: 24px;
  --r-xlarge: 32px;
  --r-pill: 999px;
  --r-focus: 4px;

  /* Sizes */
  --tap: 44px;
  --button-h: 48px;
  --icon: 24px;
  --header-h: 64px;

  /* Motion: the app's ladder and curves. */
  --dur-press: 90ms;
  --dur-quick: 150ms;
  --dur-standard: 220ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --press-scale: 0.96;
  --press-opacity: 0.88;
}

@media (min-width: 30rem) {
  :root {
    --margin: 32px;
  }
}

@media (min-width: 48rem) {
  :root {
    --margin: 40px;
  }
}

@media (min-width: 62rem) {
  :root {
    --margin: 80px;
    --section-pad: 3.75rem;
    --r-small: 16px;
    --r-medium: 20px;
    --r-large: 30px;
    --r-xlarge: 40px;
    --header-h: 72px;
  }
}

@media (min-width: 75rem) {
  :root {
    --margin: 100px;
  }
}

/* Dark: three explicit grounds, not an inversion (§3.1). */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #1b1a18;
    --surface: #272727;
    --inset: #333333;
    --text: #eeece6;
    --muted: #c2c2c2;
    --divider: #4c4c4c;
    --control-edge: #969696;
    --action: #eeece6;
    --on-action: #1b1a18;
    --action-pressed: #d3d3d3;
    --link: #eeece6;
    --selected: #3e3e3e;
    --positive: #a9d0b7;
    --positive-tint: #1f3327;
    --overlay-pressed: rgb(255 255 255 / 0.1);
    --on-category: #1b1a18;
    --float-shadow: none;
    --device-bezel: #0e0d0c;
    --device-ring: #4c4c4c;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0.01ms;
    --dur-quick: 0.01ms;
    --dur-standard: 0.01ms;
    --press-scale: 1;
  }
}

/* --- document ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored sections clear the sticky header. */
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* Nothing scrolls the page sideways; wide objects scroll inside their own container.
     `clip` on the root, not `hidden` on the body, keeps `position: sticky` working in
     Safari. */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--canvas);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  overflow-wrap: anywhere;
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-title);
}

h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-title);
}

p,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

b,
strong {
  font-weight: 600;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Thai: the system's line-height floors, no tracking, and the browser's own line breaking
   (Thai has no spaces between words). */
:lang(th) {
  --lh-display: 1.45;
  --lh-heading: 1.45;
  --lh-title: 1.5;
  --lh-body: 1.7;
  --lh-small: 1.7;
  --measure: 38em;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: normal;
}

:lang(ja),
:lang(ko) {
  --font-heading: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic",
    Meiryo, system-ui, sans-serif;
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo,
    system-ui, sans-serif;
  --lh-display: 1.3;
  --lh-heading: 1.35;
  --lh-title: 1.45;
  --lh-body: 1.8;
  --lh-small: 1.75;
  --measure: 38em;
}

/* Japanese headings break between phrases, not inside a word (where the browser can). */
:lang(ja) :is(h1, h2, h3, h4) {
  word-break: auto-phrase;
}

:lang(ko) {
  --font-heading: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --font-body: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* --- links and focus --------------------------------------------------------- */

/* Wise Markup: a link on the web is the link colour, semibold and underlined. With the
   accent in the ink, the line is what marks it. */
a {
  color: var(--link);
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Lists of links (navigation, footer, contents, guide rows) are list items: the place
   says "link", so the line arrives under the pointer instead. */
.site-nav__link,
.site-footer__list a,
.lang-switch__link,
.legal__toc-list a,
.breadcrumb a {
  text-decoration-line: none;
}

.site-nav__link:hover,
.site-footer__list a:hover,
.legal__toc-list a:hover,
.breadcrumb a:hover {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
}

/* Wise Focus states: a 2px ring in the link colour, 2px clear of the control; a text link
   rings inside a 4px corner so the ring never sits on the text around it. Shaped controls
   (pills, rows) keep their own corners. */
:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

a:not(.button, .play-badge, .skip-link, .lang-switch__link, .story-tabs a):focus-visible {
  border-radius: var(--r-focus);
}

.skip-link {
  position: absolute;
  left: var(--margin);
  top: 8px;
  z-index: 100;
  transform: translateY(-200%);
  display: inline-flex;
  align-items: center;
  min-height: var(--button-h);
  padding: 0 var(--space-button);
  border-radius: var(--r-pill);
  background-color: var(--action);
  color: var(--on-action);
  text-decoration: none;
}

.skip-link:focus {
  transform: none;
}

/* --- text primitives ---------------------------------------------------------- */

/* A short label above a headline: the titleGroup role (Noto 500, muted, sentence case). */
.eyebrow {
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: var(--lh-small);
}

.caption {
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* Every amount: Inter with tabular figures, the text colour, never red. */
.money {
  font-family: var(--font-money);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.mono {
  font-variant-numeric: tabular-nums;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- icons ---------------------------------------------------------------------
   Phosphor Regular drawings (the app's icon family, design system §8), painted in the
   current colour through a mask, so a page carries `<span class="icon icon--name"
   aria-hidden="true">` and no path data. The drawings below are generated from
   apps/budget-tracker/assets/icons/phosphor/regular by scripts/build-icons.mjs. */

.icon {
  display: inline-block;
  flex: none;
  width: var(--icon-size, var(--icon));
  height: var(--icon-size, var(--icon));
  background-color: currentColor;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
  vertical-align: middle;
}

.icon--16 {
  --icon-size: 16px;
}

/* icons:start (generated, do not edit by hand) */
:root {
  --icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,149.66l-72,72a8,8,0,0,1-11.32,0l-72-72a8,8,0,0,1,11.32-11.32L120,196.69V40a8,8,0,0,1,16,0V196.69l58.34-58.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z'/%3E%3C/svg%3E");
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E");
  --icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'/%3E%3C/svg%3E");
  --icon-caret-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  --icon-caret-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  --icon-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'/%3E%3C/svg%3E");
  --icon-cloud-slash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M53.92,34.62A8,8,0,1,0,42.08,45.38L81.32,88.55l-.06.12A65,65,0,0,0,72,88a64,64,0,0,0,0,128h88a87.34,87.34,0,0,0,31.8-5.93l10.28,11.31a8,8,0,1,0,11.84-10.76ZM160,200H72a48,48,0,0,1,0-96c1.1,0,2.2,0,3.3.12A88.4,88.4,0,0,0,72,128a8,8,0,0,0,16,0,72.25,72.25,0,0,1,5.06-26.54l87,95.7A71.66,71.66,0,0,1,160,200Zm88-72a87.89,87.89,0,0,1-22.35,58.61A8,8,0,0,1,213.71,176,72,72,0,0,0,117.37,70a8,8,0,0,1-9.48-12.89A88,88,0,0,1,248,128Z'/%3E%3C/svg%3E");
  --icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z'/%3E%3C/svg%3E");
  --icon-envelope-simple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z'/%3E%3C/svg%3E");
  --icon-file-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z'/%3E%3C/svg%3E");
  --icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24h0A104,104,0,1,0,232,128,104.12,104.12,0,0,0,128,24Zm88,104a87.61,87.61,0,0,1-3.33,24H174.16a157.44,157.44,0,0,0,0-48h38.51A87.61,87.61,0,0,1,216,128ZM102,168H154a115.11,115.11,0,0,1-26,45A115.27,115.27,0,0,1,102,168Zm-3.9-16a140.84,140.84,0,0,1,0-48h59.88a140.84,140.84,0,0,1,0,48ZM40,128a87.61,87.61,0,0,1,3.33-24H81.84a157.44,157.44,0,0,0,0,48H43.33A87.61,87.61,0,0,1,40,128ZM154,88H102a115.11,115.11,0,0,1,26-45A115.27,115.27,0,0,1,154,88Zm52.33,0H170.71a135.28,135.28,0,0,0-22.3-45.6A88.29,88.29,0,0,1,206.37,88ZM107.59,42.4A135.28,135.28,0,0,0,85.29,88H49.63A88.29,88.29,0,0,1,107.59,42.4ZM49.63,168H85.29a135.28,135.28,0,0,0,22.3,45.6A88.29,88.29,0,0,1,49.63,168Zm98.78,45.6a135.28,135.28,0,0,0,22.3-45.6h35.66A88.29,88.29,0,0,1,148.41,213.6Z'/%3E%3C/svg%3E");
  --icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E");
  --icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Zm-68-56a12,12,0,1,1-12-12A12,12,0,0,1,140,152Z'/%3E%3C/svg%3E");
  --icon-pencil-simple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z'/%3E%3C/svg%3E");
  --icon-play-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48.24-94.78-64-40A8,8,0,0,0,100,88v80a8,8,0,0,0,12.24,6.78l64-40a8,8,0,0,0,0-13.56ZM116,153.57V102.43L156.91,128Z'/%3E%3C/svg%3E");
  --icon-qr-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm0,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48ZM200,40H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-64,72V144a8,8,0,0,1,16,0v32a8,8,0,0,1-16,0Zm80-16a8,8,0,0,1-8,8H184v40a8,8,0,0,1-8,8H144a8,8,0,0,1,0-16h24V144a8,8,0,0,1,16,0v8h24A8,8,0,0,1,216,160Zm0,32v16a8,8,0,0,1-16,0V192a8,8,0,0,1,16,0Z'/%3E%3C/svg%3E");
  --icon-shopping-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M230.14,58.87A8,8,0,0,0,224,56H62.68L56.6,22.57A8,8,0,0,0,48.73,16H24a8,8,0,0,0,0,16h18L67.56,172.29a24,24,0,0,0,5.33,11.27,28,28,0,1,0,44.4,8.44h45.42A27.75,27.75,0,0,0,160,204a28,28,0,1,0,28-28H91.17a8,8,0,0,1-7.87-6.57L80.13,152h116a24,24,0,0,0,23.61-19.71l12.16-66.86A8,8,0,0,0,230.14,58.87ZM104,204a12,12,0,1,1-12-12A12,12,0,0,1,104,204Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,200,204Zm4-74.57A8,8,0,0,1,196.1,136H77.22L65.59,72H214.41Z'/%3E%3C/svg%3E");
  --icon-storefront: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232,96a7.89,7.89,0,0,0-.3-2.2L217.35,43.6A16.07,16.07,0,0,0,202,32H54A16.07,16.07,0,0,0,38.65,43.6L24.31,93.8A7.89,7.89,0,0,0,24,96h0v16a40,40,0,0,0,16,32v72a8,8,0,0,0,8,8H208a8,8,0,0,0,8-8V144a40,40,0,0,0,16-32V96ZM54,48H202l11.42,40H42.61Zm50,56h48v8a24,24,0,0,1-48,0Zm-16,0v8a24,24,0,0,1-35.12,21.26,7.88,7.88,0,0,0-1.82-1.06A24,24,0,0,1,40,112v-8ZM200,208H56V151.2a40.57,40.57,0,0,0,8,.8,40,40,0,0,0,32-16,40,40,0,0,0,64,0,40,40,0,0,0,32,16,40.57,40.57,0,0,0,8-.8Zm4.93-75.8a8.08,8.08,0,0,0-1.8,1.05A24,24,0,0,1,168,112v-8h48v8A24,24,0,0,1,204.93,132.2Z'/%3E%3C/svg%3E");
  --icon-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,64H56a8,8,0,0,1,0-16H192a8,8,0,0,0,0-16H56A24,24,0,0,0,32,56V184a24,24,0,0,0,24,24H216a16,16,0,0,0,16-16V80A16,16,0,0,0,216,64Zm0,128H56a8,8,0,0,1-8-8V78.63A23.84,23.84,0,0,0,56,80H216Zm-48-60a12,12,0,1,1,12,12A12,12,0,0,1,168,132Z'/%3E%3C/svg%3E");
  --icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E");
}

.icon--arrow-down {
  --icon-mask: var(--icon-arrow-down);
}
.icon--arrow-left {
  --icon-mask: var(--icon-arrow-left);
}
.icon--arrow-right {
  --icon-mask: var(--icon-arrow-right);
}
.icon--bell {
  --icon-mask: var(--icon-bell);
}
.icon--caret-down {
  --icon-mask: var(--icon-caret-down);
}
.icon--caret-right {
  --icon-mask: var(--icon-caret-right);
}
.icon--check {
  --icon-mask: var(--icon-check);
}
.icon--check-circle {
  --icon-mask: var(--icon-check-circle);
}
.icon--cloud-slash {
  --icon-mask: var(--icon-cloud-slash);
}
.icon--copy {
  --icon-mask: var(--icon-copy);
}
.icon--envelope-simple {
  --icon-mask: var(--icon-envelope-simple);
}
.icon--file-text {
  --icon-mask: var(--icon-file-text);
}
.icon--globe {
  --icon-mask: var(--icon-globe);
}
.icon--list {
  --icon-mask: var(--icon-list);
}
.icon--lock {
  --icon-mask: var(--icon-lock);
}
.icon--pencil-simple {
  --icon-mask: var(--icon-pencil-simple);
}
.icon--play-circle {
  --icon-mask: var(--icon-play-circle);
}
.icon--qr-code {
  --icon-mask: var(--icon-qr-code);
}
.icon--shopping-cart {
  --icon-mask: var(--icon-shopping-cart);
}
.icon--storefront {
  --icon-mask: var(--icon-storefront);
}
.icon--wallet {
  --icon-mask: var(--icon-wallet);
}
.icon--x {
  --icon-mask: var(--icon-x);
}
/* icons:end */

/* --- page frame ---------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--margin);
}

/* --- header -------------------------------------------------------------------- */

/* Wise publishes no site header, so it is built from the system's pieces: the Dual S and
   the name, text links in the label role, and the language control. It stays at the top
   on every page, on the page's own ground with a divider under it (no blur, no shadow). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--canvas);
  border-bottom: 1px solid var(--divider);
}

.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-component);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-text);
  margin-right: auto;
  min-height: var(--tap);
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
}

/* The brand name is Latin on every page, so it keeps Anuphan in Japanese and Korean. */
:lang(ja) .brand,
:lang(ko) .brand {
  font-family: "Anuphan", "Anuphan fallback", system-ui, sans-serif;
}

.brand:hover {
  text-decoration: none;
}

/* The Dual S (98 x 112) at wordmark height. The picture is the flex item, so it is the one
   that must never shrink. */
.brand > picture {
  flex: none;
}

.brand__mark {
  width: 22px;
  height: 25px;
  flex: none;
}

.brand,
.site-nav__link,
.language-menu > summary {
  white-space: nowrap;
}

/* Wise's minimal icon button: the bare glyph, 44px to touch. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--link);
  cursor: pointer;
}

.nav-toggle:hover {
  background-color: var(--overlay-pressed);
}

html[data-js] .nav-toggle {
  display: inline-flex;
}

.nav-toggle .icon {
  --icon-mask: var(--icon-list);
}

.nav-toggle[aria-expanded="true"] .icon {
  --icon-mask: var(--icon-x);
}

/* Without JavaScript the navigation simply stands open and stacked; the script only adds
   the ability to fold it on small screens. */
.site-nav {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  padding-block: var(--space-text);
  border-top: 1px solid var(--divider);
}

html[data-js] .site-nav {
  display: none;
}

html[data-js] .site-nav[data-open] {
  display: flex;
}

.site-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--text);
  font-size: var(--fs-label);
  font-weight: 500;
}

.site-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-cards);
  flex-basis: 100%;
  padding-bottom: var(--space-component);
}

html[data-js] .site-header__actions {
  display: none;
}

html[data-js] .site-nav[data-open] ~ .site-header__actions {
  display: flex;
}

/* Pages with no section links keep their language control in the bar. */
.site-header__actions--legal,
html[data-js] .site-header__actions--legal {
  display: flex;
  flex-basis: auto;
  padding-bottom: 0;
}

/* The section links stand in the bar only where all six languages fit on one line with
   the name and the language control (German and French are the longest); narrower windows
   fold them behind the menu button. Keep in step with DESKTOP in scripts/navigation.js. */
@media (min-width: 75rem) {
  .site-header__bar {
    flex-wrap: nowrap;
    column-gap: var(--space-sections);
  }

  .nav-toggle,
  html[data-js] .nav-toggle {
    display: none;
  }

  .site-nav,
  html[data-js] .site-nav,
  html[data-js] .site-nav[data-open] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-button);
    flex-basis: auto;
    padding-block: 0;
    border-top: 0;
  }

  .site-header__actions,
  html[data-js] .site-header__actions {
    display: flex;
    flex-wrap: nowrap;
    flex-basis: auto;
    padding-bottom: 0;
  }

  /* The bar carries no download button: the hero owns the page's one action (Wise Button:
     one primary per page). The badge stays in the folded menu on smaller windows. */
  .site-header__actions .play-badge--compact {
    display: none;
  }
}

/* Folded menu: the language list opens under its own button, from the left, so it never
   runs off the screen. */
@media (max-width: 74.99rem) {
  .site-header__actions:not(.site-header__actions--legal) .language-menu > .lang-switch {
    left: 0;
    right: auto;
  }
}

/* A very small window (or a page zoomed far in): the header scrolls away with the page, so
   an open menu can always be scrolled into view. */
@media (max-height: 30rem) {
  .site-header {
    position: relative;
  }

  html {
    scroll-padding-top: 16px;
  }
}

/* --- language control ----------------------------------------------------------
   Six languages: one control that opens the list (Wise Select, six or more options; owner:
   controls scale with the choices). Each choice is a real link to the same page in that
   language, so it works with no script. The current one carries a check, a heavier weight
   and aria-current: colour is never the cue. */
.language-menu {
  position: relative;
  flex-shrink: 0;
}

.language-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-text);
  min-height: var(--tap);
  padding: 0 var(--space-cards);
  border-radius: var(--r-pill);
  color: var(--link);
  font-size: var(--fs-label);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.language-menu > summary::-webkit-details-marker {
  display: none;
}

.language-menu > summary:hover {
  background-color: var(--overlay-pressed);
}

.language-menu > summary::before,
.language-menu > summary::after {
  content: "";
  display: inline-block;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}

.language-menu > summary::before {
  --m: var(--icon-globe);
  width: 20px;
  height: 20px;
}

.language-menu > summary::after {
  --m: var(--icon-caret-down);
  width: 16px;
  height: 16px;
  transition: transform var(--dur-quick) var(--ease-standard);
}

.language-menu[open] > summary::after {
  transform: rotate(180deg);
}

.language-menu > .lang-switch {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-text));
  z-index: 2;
  display: grid;
  width: min(16rem, calc(100vw - 2 * var(--margin)));
  padding: var(--space-text);
  background-color: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--r-medium);
  box-shadow: var(--float-shadow);
}

.lang-switch__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-cards);
  min-height: var(--tap);
  padding: 0 var(--space-cards);
  border-radius: var(--r-small);
  color: var(--text);
  font-size: var(--fs-label);
  font-weight: 400;
}

.lang-switch__link:hover {
  background-color: var(--overlay-pressed);
}

.lang-switch__link[aria-current="true"] {
  font-weight: 600;
}

.language-menu .lang-switch__link[aria-current="true"]::after {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}

/* A narrow phone keeps the language button on the bar's first line: the globe and the
   caret stay, and the language's name is still read out. */
@media (max-width: 22.5rem) {
  .language-menu > summary {
    padding-inline: var(--space-text);
  }

  .language-menu__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --- the language note ------------------------------------------------------------
   Shown only when a stored preference differs from the page being read. It offers and
   never redirects. scripts/navigation.js reads the preference in the head and marks the
   page before the first paint (html[data-lang-pref]), so the note is drawn with the page,
   in its place under the header and first in the reading order, and nothing moves when
   it appears. A neutral info prompt: the inset ground, one line, a link and a dismiss. */
.lang-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-text) var(--space-cards);
  margin-top: var(--space-component);
  padding: var(--space-text) var(--space-component);
  background-color: var(--inset);
  border-radius: var(--r-medium);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.lang-hint[hidden],
.lang-hint [data-lang-hint-link] {
  display: none;
}

html[data-lang-pref] .lang-hint[data-lang-hint] {
  display: flex;
}

html[data-lang-pref="en"] .lang-hint [data-lang-hint-link="en"],
html[data-lang-pref="th"] .lang-hint [data-lang-hint-link="th"],
html[data-lang-pref="ja"] .lang-hint [data-lang-hint-link="ja"],
html[data-lang-pref="ko"] .lang-hint [data-lang-hint-link="ko"],
html[data-lang-pref="de"] .lang-hint [data-lang-hint-link="de"],
html[data-lang-pref="fr"] .lang-hint [data-lang-hint-link="fr"] {
  display: inline;
}

.lang-hint__dismiss {
  min-height: var(--tap);
  margin-left: auto;
  padding: 0 var(--space-text);
  background: none;
  border: 0;
  border-radius: var(--r-focus);
  color: var(--link);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* --- buttons ----------------------------------------------------------------------
   Wise Button, large: 48 tall, a pill, the label role; full width on a phone and as wide
   as its label from 48rem. Primary is the ink under a canvas label; secondary is an ink
   edge. Pressing compresses and dims; it never changes the colour. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-text);
  width: 100%;
  min-height: var(--button-h);
  padding: var(--space-text) var(--space-button);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: var(--lh-small);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-quick) var(--ease-standard),
    transform var(--dur-press) var(--ease-standard),
    opacity var(--dur-press) var(--ease-standard);
}

@media (min-width: 48rem) {
  .button {
    width: auto;
  }
}

.button--primary {
  background-color: var(--action);
  color: var(--on-action);
}

.button--primary:hover {
  background-color: var(--action-pressed);
  color: var(--on-action);
  text-decoration: none;
}

.button--secondary {
  background-color: transparent;
  border-color: var(--text);
  color: var(--link);
}

.button--secondary:hover {
  background-color: var(--overlay-pressed);
  text-decoration: none;
}

.button:active {
  transform: scale(var(--press-scale));
  opacity: var(--press-opacity);
}

.button[hidden] {
  display: none;
}

/* A text action: the link role with a trailing arrow, for "see how it works" kinds of
   move. A link, never a second button (Wise Button: use a link to go somewhere). */
.text-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-text);
  min-height: var(--tap);
  font-size: var(--fs-label);
}

.text-action .icon {
  --icon-size: 16px;
}

/* --- the store badge ----------------------------------------------------------------
   Google's own "Get it on Google Play" artwork, unmodified and self-hosted. Only its size
   is set, and the clear space Google asks for (a quarter of the badge's height) is kept.
   `--play-badge-h` is the height of the badge itself, not of the file: 48 beside the
   page's other actions (the large button's height), 40 in the header. Measured from the
   646 x 250 files: the English badge is 168 tall with its clear space already inside the
   PNG; the Thai one is 192 tall and runs the full width, so `.play-badge--th` adds the
   rest of the clear space around it. */
.play-badge {
  --play-badge-h: 48px;
  display: inline-flex;
  border-radius: var(--r-small);
  transition: transform var(--dur-press) var(--ease-standard);
}

.play-badge img {
  display: block;
  width: auto;
  height: calc(var(--play-badge-h) * 250 / 168);
}

.play-badge--th {
  padding: calc(var(--play-badge-h) * (0.25 - 29 / 192)) calc(var(--play-badge-h) * 0.25);
}

.play-badge--th img {
  height: calc(var(--play-badge-h) * 250 / 192);
}

.play-badge:active {
  transform: scale(var(--press-scale));
}

.play-badge--compact {
  --play-badge-h: 40px;
}

/* --- the phone ----------------------------------------------------------------------
   Real captures of the app, unretouched, in a flat phone: an ink bezel with no gradient
   and no shadow (cards are flat). In dark mode the bezel is near black with a divider ring
   so it keeps its edge on the dark page. */
.device {
  position: relative;
  width: 100%;
  max-width: 260px;
  margin-inline: auto;
  padding: 8px;
  background-color: var(--device-bezel);
  border-radius: 44px;
  box-shadow: 0 0 0 1px var(--device-ring);
}

.device__screen {
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  background-color: var(--canvas);
  /* The captures are 1320 x 2868 (iPhone 18 Pro Max), shown at 760 and 380 wide. */
  aspect-ratio: 1320 / 2868;
}

.device__screen picture {
  display: block;
  width: 100%;
  height: 100%;
}

.device__screen img,
.device__screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.device--sm {
  max-width: 200px;
  padding: 6px;
  border-radius: 34px;
}

.device--sm .device__screen {
  border-radius: 28px;
}

/* Rows of phones: two across on a phone, the whole set across on a wide screen. */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sections) var(--space-component);
}

.gallery__item {
  display: grid;
  align-content: start;
  gap: var(--space-cards);
}

.gallery__caption {
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  text-align: center;
}

.gallery__caption strong {
  color: var(--text);
}

@media (min-width: 62rem) {
  .gallery {
    grid-template-columns: repeat(var(--gallery-cols, 4), minmax(0, 1fr));
    gap: var(--space-sections) var(--space-button);
  }

  .gallery--pair {
    --gallery-cols: 2;
  }
}

/* --- tables ------------------------------------------------------------------------
   Wise Table (web): the data straight on the page, a header row on the neutral ground,
   rows split by a divider, scrolling sideways inside its own box on a phone. No card. */
.flow-table-wrap {
  overflow-x: auto;
  border-radius: var(--r-small);
}

.flow-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.flow-table--fit {
  min-width: 0;
}

.flow-table--fit thead th:first-child {
  width: 44%;
}

.flow-table.flow-table--compare thead th:first-child {
  width: auto;
}

@media (max-width: 29.99rem) {
  .flow-table.flow-table--compare {
    min-width: 34rem;
  }
}

.flow-table th,
.flow-table td {
  padding: var(--space-cards) var(--space-component);
  text-align: left;
  vertical-align: top;
}

.flow-table thead th {
  background-color: var(--inset);
  color: var(--text);
  font-weight: 600;
}

.flow-table thead th:first-child {
  border-radius: var(--r-small) 0 0 var(--r-small);
}

.flow-table thead th:last-child {
  border-radius: 0 var(--r-small) var(--r-small) 0;
}

.flow-table tbody tr + tr th,
.flow-table tbody tr + tr td {
  border-top: 1px solid var(--divider);
}

.flow-table tbody th {
  font-weight: 600;
}

.flow-table tbody td {
  color: var(--text);
}

.flow-table.flow-table--compare th,
.flow-table.flow-table--compare td {
  padding-inline: var(--space-cards);
}

/* --- footer ---------------------------------------------------------------------------
   Wise publishes no site footer. Lists under noun headers of three words or fewer
   (Section header), links as list items, and one small-print block at the very end
   (Text Disclaimer: once per page, last). */
.site-footer {
  padding-block: var(--section-pad);
  border-top: 1px solid var(--divider);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sections) var(--space-component);
}

.site-footer__group:first-child {
  grid-column: 1 / -1;
}

.site-footer__group > * + * {
  margin-top: var(--space-text);
}

.site-footer__title {
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 500;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-text);
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
}

:lang(ja) .site-footer__brand,
:lang(ko) .site-footer__brand {
  font-family: "Anuphan", "Anuphan fallback", system-ui, sans-serif;
}

.site-footer__mark {
  width: 22px;
  height: 25px;
  flex: none;
}

.site-footer__brandline {
  max-width: 34ch;
  color: var(--muted);
}

.site-footer__list {
  list-style: none;
}

.site-footer__list a,
.site-footer .lang-switch__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--space-text) 0;
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 400;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.site-footer .lang-switch {
  display: grid;
  justify-items: start;
}

.site-footer .lang-switch__link:hover {
  background: none;
  text-decoration-line: underline;
}

.site-footer .lang-switch__link[aria-current="true"] {
  font-weight: 600;
}

.site-footer__legal {
  margin-top: var(--section-pad);
  padding-top: var(--space-button);
  border-top: 1px solid var(--divider);
  color: var(--muted);
}

.site-footer__legal > * + * {
  margin-top: var(--space-cards);
}

.site-footer__trademark {
  max-width: 78ch;
}

@media (min-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .site-footer__grid {
    grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
    gap: var(--space-button);
  }

  .site-footer__group:first-child {
    grid-column: auto;
  }
}

/* --- disclosure rows (Wise Accordion) ------------------------------------------------
   Plain rows between dividers: the question in the label weight, a caret that turns, the
   answer under it. Native details, so it opens with no script. */
.disclosure {
  border-bottom: 1px solid var(--divider);
}

.disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-component);
  min-height: 56px;
  padding-block: var(--space-component);
  color: var(--text);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: var(--lh-small);
  cursor: pointer;
  list-style: none;
}

.disclosure > summary::-webkit-details-marker {
  display: none;
}

.disclosure > summary::after {
  content: "";
  width: var(--icon);
  height: var(--icon);
  flex: none;
  background-color: var(--link);
  -webkit-mask: var(--icon-caret-down) center / contain no-repeat;
  mask: var(--icon-caret-down) center / contain no-repeat;
  transition: transform var(--dur-quick) var(--ease-standard);
}

.disclosure[open] > summary::after {
  transform: rotate(180deg);
}

.disclosure > summary:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* --- page transitions -------------------------------------------------------------------
   Moving between two pages of the site is one short crossfade; the header holds still.
   Browsers without cross-document view transitions simply navigate. */
@view-transition {
  navigation: auto;
}

.site-header {
  view-transition-name: site-header;
}

::view-transition-old(root) {
  animation: page-out var(--dur-quick) var(--ease-exit) both;
}

::view-transition-new(root) {
  animation: page-in var(--dur-standard) var(--ease-standard) both;
}

@keyframes page-out {
  to {
    opacity: 0;
  }
}

@keyframes page-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* --- forced colours ---------------------------------------------------------------- */
@media (forced-colors: active) {
  .icon,
  .language-menu > summary::before,
  .language-menu > summary::after,
  .disclosure > summary::after,
  .breadcrumb li + li::before,
  .language-menu .lang-switch__link[aria-current="true"]::after {
    forced-color-adjust: none;
    background-color: CanvasText;
  }

  a .icon,
  .breadcrumb li + li::before,
  .language-menu > summary::before,
  .language-menu > summary::after,
  .language-menu .lang-switch__link[aria-current="true"]::after {
    background-color: LinkText;
  }

  button .icon {
    background-color: ButtonText;
  }

  .story-tabs {
    border: 1px solid CanvasText;
  }

  .story-tabs a[aria-selected="true"] {
    outline: 2px solid Highlight;
    outline-offset: -4px;
  }

  .legal__toc-list a[aria-current="location"] {
    border-left: 2px solid CanvasText;
  }
}