@font-face {
    font-family: "Google Sans Flex";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/google-sans-flex/google-sans-flex-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: "Google Sans Flex";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/google-sans-flex/google-sans-flex-latin-ext.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;
}
@font-face {
    font-family: "Google Sans Flex";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/google-sans-flex/google-sans-flex-latin.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;
}
/* THICCCBOI has no Vietnamese glyphs: keep it for the logo wordmark and English display text. */
@font-face { font-family: "THICCCBOI"; font-weight: 400; font-display: swap; src: url("../fonts/thicccboi/THICCCBOI-Regular.woff2") format("woff2"); }
@font-face { font-family: "THICCCBOI"; font-weight: 500; font-display: swap; src: url("../fonts/thicccboi/THICCCBOI-Medium.woff2") format("woff2"); }
@font-face { font-family: "THICCCBOI"; font-weight: 600; font-display: swap; src: url("../fonts/thicccboi/THICCCBOI-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "THICCCBOI"; font-weight: 700; font-display: swap; src: url("../fonts/thicccboi/THICCCBOI-Bold.woff2") format("woff2"); }
@font-face { font-family: "THICCCBOI"; font-weight: 800; font-display: swap; src: url("../fonts/thicccboi/THICCCBOI-ExtraBold.woff2") format("woff2"); }

:root {
    --color-blue-50: #f0f6ff;
    --color-blue-75: #a6ccf8;
    --color-blue-100: #7da8f3;
    --color-blue-200: #4483ee;
    --color-blue-300: #1e69eb;
    --color-blue-400: #154aa5;
    --color-blue-500: #12408f;
    --color-orange-50: #ffeee6;
    --color-orange-75: #f6b8a2;
    --color-orange-100: #f29b7b;
    --color-orange-200: #ed7043;
    --color-orange-300: #e9531c;
    --color-orange-400: #a33a14;
    --color-orange-500: #8e3311;
    --color-gray-50: #d8d8d8;
    --color-gray-75: #6f6f6f;
    --color-gray-100: #4e4e4e;
    --color-gray-200: #323232;
    --color-dark-blue-50: #8494a6;
    /* dark-blue-50 darkened to 4.6:1 on white, for text (WCAG AA); dark-blue-50 stays for borders. */
    --color-dark-blue-75: #6a7685;
    --color-dark-blue-100: #091231;
    --color-dark-blue-200: #050b1e;
    --color-white: #ffffff;
    --color-red-500: #ef3939;
    --color-green-500: #15b24c;
    --gradient-blue-1: linear-gradient(180deg, #63d7ca 0%, #148ce2 36%, #293ff5 100%);
    --gradient-blue-2: linear-gradient(88.5deg, #1e69eb 0.4%, #1978e7 99.5%);
    --brand-ink: #181134;
    --shadow-floating: 0 4px 8.4px rgb(56 62 74 / 0.08);

    --font-sans: "Google Sans Flex", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --font-display: "THICCCBOI", "Google Sans Flex", system-ui, sans-serif;
    --text-h1: 3.5rem;
    --leading-h1: 4.625rem;
    --text-h2: 3rem;
    --leading-h2: 4rem;
    --text-h3: 2.5rem;
    --leading-h3: 3.75rem;
    --text-h4: 2rem;
    --leading-h4: 2.5rem;
    --text-h5: 1.875rem;
    --leading-h5: 2.5rem;
    --text-h6: 1.5rem;
    --leading-h6: 1.75rem;
    --text-h7: 1.25rem;
    --leading-h7: 1.625rem;
    --text-body-l: 1.125rem;
    --leading-body-l: 1.6875rem;
    --text-body-m: 1rem;
    --leading-body-m: 1.5rem;
    --text-body-s: 0.875rem;
    --leading-body-s: 1.25rem;
    /* Figma renders Medium and SemiBold text at optical size 30 whatever the font size, where the browser
       would use the font size; text in those weights pins it to keep the design's widths and line breaks. */
    --opsz-medium: "opsz" 30;

    /* Figma grids: 375px → 16px margins, 1440–1680px → 120px; content stops at 1520px, which gives 200px at 1920px. */
    --container-max: 95rem;
    --page-margin: clamp(1rem, 9.7653vw - 1.2888rem, 7.5rem);
    --grid-columns: 4;
    --grid-gutter: 1rem;

    --fg: var(--color-gray-100);
    --bg: var(--color-white);
    --muted: var(--color-gray-75);
    --accent: var(--color-blue-300);
    --border: var(--color-gray-50);
}

@media (min-width: 48rem) {
    :root {
        --grid-columns: 12;
        --grid-gutter: 1.5rem;
    }
}

* { box-sizing: border-box; }
body { margin: 0; font: 400 var(--text-body-m)/var(--leading-body-m) var(--font-sans); color: var(--fg); background: var(--bg); }
a { color: var(--accent); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; color: var(--color-gray-200); font-weight: 600; }
h1 { font-size: var(--text-h1); line-height: var(--leading-h1); }
h2 { font-size: var(--text-h2); line-height: var(--leading-h2); }
h3 { font-size: var(--text-h3); line-height: var(--leading-h3); }
h4 { font-size: var(--text-h4); line-height: var(--leading-h4); }
h5 { font-size: var(--text-h5); line-height: var(--leading-h5); }
h6 { font-size: var(--text-h6); line-height: var(--leading-h6); }

.text-h1 { font-size: var(--text-h1); line-height: var(--leading-h1); }
.text-h2 { font-size: var(--text-h2); line-height: var(--leading-h2); }
.text-h3 { font-size: var(--text-h3); line-height: var(--leading-h3); }
.text-h4 { font-size: var(--text-h4); line-height: var(--leading-h4); }
.text-h5 { font-size: var(--text-h5); line-height: var(--leading-h5); }
.text-h6 { font-size: var(--text-h6); line-height: var(--leading-h6); }
.text-h7 { font-size: var(--text-h7); line-height: var(--leading-h7); }
.text-body-l { font-size: var(--text-body-l); line-height: var(--leading-body-l); }
.text-body-m { font-size: var(--text-body-m); line-height: var(--leading-body-m); }
.text-body-s { font-size: var(--text-body-s); line-height: var(--leading-body-s); }
/* Figma sets the Bold styles (and a few footer texts) in the static "Google Sans Flex 36pt" instance; the rest use automatic optical size. */
.text-bold { font-weight: 700; font-variation-settings: "opsz" 36; }
.text-semibold { font-weight: 600; }
.text-medium { font-weight: 500; }
.text-regular { font-weight: 400; }

.container { width: 100%; max-width: calc(var(--container-max) + 2 * var(--page-margin)); margin-inline: auto; padding-inline: var(--page-margin); }
.grid { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); }
.site-main { padding-block: 2rem 4rem; }

.form { display: grid; gap: 0.75rem; max-width: 360px; }
.form label { display: grid; gap: 0.25rem; }
.form input { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; font: inherit; }
.form .checkbox { grid-auto-flow: column; justify-content: start; align-items: center; }
button { font: inherit; cursor: pointer; }
button.link { padding: 0; border: 0; background: none; color: var(--accent); }
form.inline { display: inline; }
.alert { padding: 0.5rem 0.75rem; border: 1px solid #fca5a5; background: #fef2f2; color: #991b1b; border-radius: 4px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--border); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }