/* Base Font Settings */
.cv-home-hero { overflow: clip; }
.cv-home-hero__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,4vw,4rem); align-items:center; }
.cv-home-hero__copy { min-width:0; }
.cv-home-hero__copy .cv-display { font-size:clamp(2.2rem,4.6vw,4.3rem); }
.cv-brand-visual { min-width:0; }
.cv-brand-visual>img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:24px; box-shadow:0 20px 55px #24205020; }
.cv-media-caption { color:var(--cv-muted); font-size:.75rem; margin:.5rem 0 1.5rem; }
.cv-output-wall { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.3rem; margin-bottom:4rem; perspective:1200px; }
.cv-output-wall figure { min-width:0; }
.cv-output-wall figure:nth-child(1) { transform:rotate(-3deg); }
.cv-output-wall figure:nth-child(3) { transform:rotate(3deg); }
.cv-output-wall img { width:100%; border-radius:20px; box-shadow:0 20px 60px #0004; }
.cv-output-wall figcaption { padding:.7rem 0; font-size:.8rem; text-align:center; }
.cv-feature-bento { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.cv-feature-bento .cv-feature-bento__card { display:block; padding:2rem; border:1px solid var(--cv-border); border-radius:24px; background:linear-gradient(145deg,var(--cv-bg-subtle),var(--cv-bg)); transition:translate .3s,box-shadow .3s; }
.cv-feature-bento__card .cv-spec__icon { display:flex; width:54px; height:54px; margin-bottom:1.5rem; border-radius:16px; background:var(--cv-accent-soft); align-items:center; justify-content:center; }
.cv-feature-bento__card:nth-child(2),.cv-feature-bento__card:nth-child(5) { background:linear-gradient(145deg,var(--cv-accent-soft),var(--cv-bg)); }
@media(hover:hover){.cv-feature-bento .cv-feature-bento__card:hover{translate:0 -6px;box-shadow:0 20px 40px #29204e15}}
@media(max-width:900px){.cv-home-hero__grid{grid-template-columns:1fr}.cv-home-hero__grid>figure{max-width:540px;justify-self:center}.cv-feature-bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.cv-home-hero__grid{gap:1.8rem}.cv-feature-bento{grid-template-columns:1fr}.cv-output-wall{gap:.65rem}.cv-output-wall img{border-radius:10px}.cv-output-wall figcaption{font-size:.65rem}.cv-feature-bento .cv-feature-bento__card{padding:1.5rem}}
@media(prefers-reduced-motion:reduce){.cv-feature-bento .cv-feature-bento__card{transition:none}.cv-feature-bento .cv-feature-bento__card:hover{translate:none}}
.cv-editorial-visual { padding: clamp(1rem, 3vw, 2.5rem) 0; background: var(--cv-bg-subtle); }
.cv-case-section { background: var(--cv-bg-subtle); }
.cv-case-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .75fr); gap: 2rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.cv-case-intro .cv-lead { margin: 0; }
.cv-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 1.5rem); }
.cv-case-card { min-width: 0; overflow: hidden; border: 1px solid var(--cv-border); border-radius: 1.25rem; background: var(--cv-bg); box-shadow: 0 14px 40px rgba(31, 35, 91, .06); }
.cv-case-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.cv-case-card__body { padding: clamp(1.1rem, 2vw, 1.65rem); }
.cv-case-card__tag { display: inline-flex; padding: .35rem .65rem; border-radius: 999px; background: var(--cv-accent-soft); color: var(--cv-accent-text); font-size: .75rem; font-weight: 700; }
.cv-case-card h3 { margin: .9rem 0 .55rem; color: var(--cv-text); font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-weight: 800; line-height: 1.35; }
.cv-case-card p { margin: 0; color: var(--cv-muted); line-height: 1.7; }
.cv-case-disclosure { margin: 1.1rem 0 1.5rem; color: var(--cv-muted); font-size: .825rem; line-height: 1.6; }
.cv-case-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 800px) { .cv-case-intro { grid-template-columns: 1fr; gap: 1rem; } .cv-case-grid { grid-template-columns: 1fr; } .cv-case-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .cv-case-card img { height: 100%; aspect-ratio: auto; } }
@media (max-width: 520px) { .cv-case-card { display: block; } .cv-case-card img { height: auto; aspect-ratio: 16 / 9; } }
.cv-editorial-visual__frame { overflow: hidden; border-radius: clamp(1rem, 2vw, 1.75rem); border: 1px solid var(--cv-border); box-shadow: 0 24px 70px rgba(31, 35, 91, .12); }
.cv-editorial-visual__frame img { display: block; width: 100%; max-height: 560px; object-fit: cover; object-position: center; }
.cv-editorial-visual__caption { margin: .7rem 0 0; color: var(--cv-muted); font-size: .8rem; text-align: right; }
@media (max-width: 640px) { .cv-editorial-visual__frame img { min-height: 250px; max-height: 360px; } }

html, body {
    /* Sarabun covers Latin and Thai, so it leads alone. Putting a Latin-only face
       first makes the browser fall back per-character for Thai and lay the marks
       out against the wrong metrics, which sinks them into the base glyph. */
    font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Thai needs headroom for สระบน + วรรณยุกต์ stacked above the consonant. */
    line-height: 1.6;
}

/* Truncating containers clip the box, so the tone mark above the x-height is the
   first thing lost. Keep their line box tall enough to survive the clip. */
.truncate,
[class*="line-clamp-"] {
    line-height: 1.5;
}

/* ---------------------------------------------------------------- per-script faces
   Sarabun is a Thai typeface. Leading with it globally was correct while the product
   was Thai and Latin only, and it is wrong now: five CJK locales ship, and every
   Japanese, Korean and Chinese glyph was falling through Sarabun to whatever the
   system happened to pick. That is not a missing-font failure — the text renders —
   it is a wrong-font one, which is harder to see and reads as amateur to a native
   reader.

   Each rule names that language's own system UI face first and keeps Sarabun in the
   stack behind it, so a Thai string inside a Japanese interface still sets correctly.

   The scripts are separated because their conventions differ, not merely their
   glyphs: Japanese and Chinese take no extra leading, Korean syllable blocks need
   more than Latin at the same size, and Vietnamese needs room for two stacked marks
   on one letter. Traditional and Simplified are named apart because a reader of one
   notices the other's forms immediately. */

:lang(ja) {
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo',
                 'Noto Sans JP', 'Sarabun', system-ui, sans-serif;
    line-height: 1.7;
}

:lang(ko) {
    font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR',
                 'Sarabun', system-ui, sans-serif;
    /* Hangul syllable blocks are visually denser than Latin at the same size. */
    line-height: 1.75;
    /* Korean breaks at spaces and never mid-word. */
    word-break: keep-all;
}

:lang(zh-Hant) {
    font-family: 'PingFang TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei',
                 'Noto Sans TC', 'Sarabun', system-ui, sans-serif;
    line-height: 1.7;
}

:lang(zh-Hans) {
    font-family: 'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei',
                 'Noto Sans SC', 'Sarabun', system-ui, sans-serif;
    line-height: 1.7;
}

:lang(vi) {
    /* Vietnamese stacks a vowel-quality mark and a tone mark on one letter. Sarabun
       carries the Vietnamese range and is already tuned for stacked marks, so it
       leads here — but the line needs the same headroom Thai gets. */
    font-family: 'Sarabun', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.7;
}


/* Iconify Icon Styles */
.iconify {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

.iconify-inline {
    vertical-align: -0.125em;
}

/* Animated Icon Styles */
.icon-spin {
    animation: icon-spin 1s linear infinite;
}

.icon-pulse {
    animation: icon-pulse 1.5s ease-in-out infinite;
}

.icon-bounce {
    animation: icon-bounce 1s ease infinite;
}

@keyframes icon-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes icon-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.95); }
}

@keyframes icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* These four were the old brand's blue glow, kept alive by class names the markup still
   spells. They are flat now, and they are this brand's colours. `neon` survives only as a
   name; nothing here emits light. */
.glass {
    background: var(--cv-card);
    border: 1px solid var(--cv-border);
}

.neon-glow {
    box-shadow: none;
}

.neon-border-blue {
    border: 1px solid var(--cv-primary);
}

.hero-gradient {
    background: var(--cv-bg-subtle);
}

/* Opaque. A 72%-white panel over a page is a frosted panel whether or not it is blurred, and
   it was the reason a theme-aware text colour sat at 2.42:1 on the product page. */
.glass-light {
    background: var(--cv-card);
    border: 1px solid var(--cv-border);
    box-shadow: var(--cv-shadow-md);
}

.hero-gradient-light {
    background: var(--cv-bg-subtle);
}

.ui-card {
    background: var(--cv-card);
    border: 1px solid var(--cv-border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
}

/* Pricing Page Specifics */
details>summary {
    list-style: none;
}

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

.feature-card {
    background: var(--cv-card);
    border: 1px solid var(--cv-border);
    transition: all 0.3s ease;
}

.feature-card:hover {
    border-color: var(--cv-primary);
    box-shadow: var(--cv-shadow-md);
}

/* ========================================
   Navigation Link Styles
   ======================================== */
.nav-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--cv-tap);
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cv-muted);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    position: relative;
    text-decoration: none;
}

.nav-link:hover {
    color: var(--cv-primary);
    background-color: rgb(var(--cv-primary-rgb) / 0.06);
}

/* Active Navigation Link */
.nav-link.nav-link-active {
    color: var(--cv-primary) !important;
    font-weight: 600;
    background-color: rgb(var(--cv-primary-rgb) / 0.09);
}

.nav-link.nav-link-active::after {
    content: '';
    position: absolute;
    bottom: -0.375rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.25rem;
    height: 2.5px;
    background: var(--cv-brand-bar);
    border-radius: 2px;
}

/* ========================================
   Top Navigation Progress Bar
   ======================================== */
.nav-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    /* The mark in motion: three solid segments, twice the width of the viewport, slid along
       as the page loads. Hard stops, so it reads as a moving flag and not a smear. */
    background: linear-gradient(90deg,
            var(--cv-ribbon-indigo) 0 25%,
            var(--cv-ribbon-cyan) 25% 50%,
            var(--cv-ribbon-violet) 50% 75%,
            var(--cv-ribbon-indigo) 75% 100%);
    background-size: 200% 100%;
    z-index: var(--cv-z-toast);
    transition: width 0.4s ease;
    opacity: 0;
    pointer-events: none;
}

.nav-progress-bar.nav-progress-active {
    opacity: 1;
    width: 90%;
    animation: progressShimmer 1.5s linear infinite, progressGrow 2s ease-out forwards;
}

@keyframes progressShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes progressGrow {
    0% { width: 0%; }
    50% { width: 60%; }
    100% { width: 90%; }
}

/* ========================================
   Skeleton Loading Styles
   ======================================== */
/* The pre-paint skeleton, injected by App.razor -- the first thing a visitor's browser draws.
   It swept a highlight across a gradient while every other skeleton in the product had already
   been changed to a flat pulse, which made the claim "the skeleton pulses instead of
   shimmering" true everywhere except the one place it is seen first. */
.skeleton-shimmer {
    background: var(--cv-bg-subtle);
    animation: cv-pulse 1.5s ease-in-out infinite;
}

.skeleton-page {
    animation: skeletonFadeIn 0.2s ease-out;
}

@keyframes skeletonShimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes skeletonFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Skeleton Overlay (for enhanced navigation) */
.skeleton-overlay {
    position: relative;
    z-index: 1;
    background: var(--cv-card);
    animation: skeletonFadeIn 0.15s ease-out;
    min-height: calc(100vh - 64px);
}

/* Responsive skeleton grid */
@media (max-width: 768px) {
    .skeleton-overlay .skeleton-page > div:last-child > div {
        grid-template-columns: 1fr !important;
    }
}

/* Page content transition */
.page-content {
    transition: opacity 0.15s ease;
}

/* ========================================
   Legal Page Design System
   ======================================== */

/* Was a navy-to-teal blend with a teal ellipse floating in it, in a teal this product does
   not own. One solid dark block, with the mark's three segments along the top. */
.legal-hero {
    background: var(--cv-sidebar);
    position: relative;
    overflow: hidden;
}

.legal-hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--cv-brand-bar);
    pointer-events: none;
}

.legal-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--cv-border);
}

/* Legal page layout with sidebar */
.legal-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

@media (max-width: 1024px) {
    .legal-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Sidebar Table of Contents */
.legal-toc {
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding: 1.5rem;
    border-radius: 1rem;
    background: var(--cv-bg-subtle);
    border: 1px solid var(--cv-border);
    scrollbar-width: thin;
    scrollbar-color: var(--cv-border-strong) transparent;
}

.legal-toc::-webkit-scrollbar {
    width: 4px;
}

.legal-toc::-webkit-scrollbar-track {
    background: transparent;
}

.legal-toc::-webkit-scrollbar-thumb {
    background: var(--cv-border-strong);
    border-radius: 2px;
}

@media (max-width: 1024px) {
    .legal-toc {
        position: static;
        max-height: none;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 1rem;
    }
    .legal-toc h3 {
        width: 100%;
    }
}

/* `min-height` here rather than from the shared tap-target block, and the reason is worth
   knowing: that block matches `a[href]:where(.flex, .inline-flex, .block, .w-full)`, which are
   Tailwind *class names*. It cannot see that this component is `display: flex`, because the
   element carries `legal-toc-link` and not `flex`. So every link in a legal page's contents
   measured 34px tall -- 870 of the marketing site's tap-target findings were this one rule and
   the footer's 40px social buttons. A component sets its own floor. */
.legal-toc-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--cv-tap);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cv-muted);
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1.3;
}

/* The hover was `rgba(6, 182, 212, …)` twice and `#0891b2` once -- Tailwind's cyan-500 and
   cyan-600, from the palette this rebrand retired, fixed to one theme. The colour beside them
   was already the token; only the tints were literals, which is why a search for brand hex
   never found them. */
.legal-toc-link:hover {
    color: var(--cv-accent-text);
    background: rgb(var(--cv-accent-rgb) / 0.08);
}

.legal-toc-link .toc-number {
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    background: var(--cv-border);
    color: var(--cv-muted);
    transition: all 0.2s ease;
}

.legal-toc-link:hover .toc-number {
    background: rgb(var(--cv-accent-rgb) / 0.15);
    color: var(--cv-accent-text);
}

@media (max-width: 1024px) {
    .legal-toc-link {
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
    }
}

/* Legal content sections */
.legal-section {
    background: var(--cv-card);
    border: 1px solid var(--cv-border);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 1.5rem;
    transition: border-color 0.3s ease;
    scroll-margin-top: 5rem;
}

.legal-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.legal-section-number {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 800;
    background: var(--cv-primary);
    color: var(--cv-primary-ink);
}

.legal-section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cv-heading);
    line-height: 1.3;
}

.legal-section p,
.legal-section li {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--cv-text);
}

.legal-section strong {
    color: var(--cv-heading);
    font-weight: 600;
}

/* Highlighted legal sections (important notices).

   These were three hand-mixed tints -- teal, amber and rose -- each a pair of Tailwind's
   lightest steps under a gradient, and all three fixed light. On a legal page in the dark
   theme that is a pale panel with near-white text on it. The status tokens carry a soft
   surface and a matching ink that are measured in both themes, which is what these three
   were reaching for. */
.legal-section-highlight {
    background: var(--cv-info-soft);
    border-color: var(--cv-info);
}

.legal-section-warning {
    background: var(--cv-warning-soft);
    border-color: var(--cv-warning);
}

.legal-section-danger {
    background: var(--cv-danger-soft);
    border-color: var(--cv-danger);
}

/* Legal page info badges */
.legal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgb(var(--cv-accent-text-rgb) / 0.1);
    color: var(--cv-accent-text);
    border: 1px solid rgb(var(--cv-accent-text-rgb) / 0.25);
}

/* Shopee accent variant.

   #ee4d2d is Shopee's own brand orange, not this product's. It stays a literal on purpose:
   a third party's mark is not ours to route through our palette, and it does not change
   with our theme because it does not belong to our theme. Same reasoning as the LINE green
   the last audit documented and left alone. */
.legal-section-number.shopee-accent {
    background: #EE4D2D;
}

.legal-badge.shopee-badge {
    background: rgba(238, 77, 45, 0.1);
    color: #ee4d2d;
    border-color: rgba(238, 77, 45, 0.2);
}

/* Legal list styling */
.legal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.legal-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0;
}

.legal-list li::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cv-primary);
    margin-top: 0.5rem;
}

.legal-list.shopee-list li::before {
    background: #ee4d2d;
}

/* Legal data table */
.legal-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--cv-border);
    margin: 1rem 0;
}

.legal-table th {
    background: var(--cv-bg-subtle);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cv-text);
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--cv-border);
}

.legal-table td {
    font-size: 0.875rem;
    color: var(--cv-text);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--cv-border);
}

.legal-table tr:last-child td {
    border-bottom: none;
}

/* Legal cross-link footer */
.legal-cross-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--cv-border);
}

.legal-cross-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--cv-tap);
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: var(--cv-bg-subtle);
    border: 1px solid var(--cv-border);
    color: var(--cv-text);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.legal-cross-link:hover {
    border-color: var(--cv-accent-text);
    color: var(--cv-accent-text);
    background: var(--cv-accent-soft);
}

.legal-cross-link .material-symbols-rounded,
.legal-cross-link iconify-icon {
    font-size: 1rem;
    color: var(--cv-muted);
}

.legal-cross-link:hover .material-symbols-rounded,
.legal-cross-link:hover iconify-icon {
    color: var(--cv-primary);
}

/* Last updated badge */
.legal-updated-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: rgb(255 255 255 / 0.12);
    border: 1px solid rgb(255 255 255 / 0.22);
    font-size: 0.8125rem;
    color: rgb(255 255 255 / 0.86);
}

/* Legal page smooth scroll */
html {
    scroll-behavior: smooth;
}

/* ---------------------------------------------------------------------------
   The font utilities, per script.

   WHY THIS BLOCK EXISTS. The :lang() rules above were written, reviewed and
   correct, and they applied to nothing. Tailwind's fontFamily config named
   Sarabun -- a Thai face with no kanji, no hangul and neither Chinese script --
   for sans, display, body and thai alike, so every .font-sans and .font-display
   carried it. Those two utilities sit on the root wrapper of 23 elements across
   the two apps, both MainLayouts among them, so they wrap every screen.

   A :lang(ja) selector and a .font-display selector have the same specificity
   (0,1,0), and the Tailwind Play CDN injects its sheet AFTER app.css -- so the
   later rule won, on every page, for every Japanese, Korean and Chinese
   customer. The ninth audit measured it: five markets rendering in a Thai face
   throughout.

   These rules are (0,2,0) and win outright. They are generated per locale from
   the same stacks as the :lang() rules above rather than repeated by hand,
   because two copies of a font stack is how one of them comes to be corrected.

   The Tailwind config itself now names a neutral system stack, so a locale with
   no rule here degrades to the platform's own UI font rather than to Thai.
   --------------------------------------------------------------------------- */

:lang(th) {
    font-family: 'Sarabun', 'Leelawadee UI', 'Noto Sans Thai', system-ui, sans-serif;
}

:lang(ja) .font-sans,
:lang(ja) .font-display,
:lang(ja) .font-body,
:lang(ja) .font-thai {
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Sarabun', system-ui, sans-serif
}

:lang(ko) .font-sans,
:lang(ko) .font-display,
:lang(ko) .font-body,
:lang(ko) .font-thai {
    font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Sarabun', system-ui, sans-serif
}

:lang(zh-Hant) .font-sans,
:lang(zh-Hant) .font-display,
:lang(zh-Hant) .font-body,
:lang(zh-Hant) .font-thai {
    font-family: 'PingFang TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Noto Sans TC', 'Sarabun', system-ui, sans-serif
}

:lang(zh-Hans) .font-sans,
:lang(zh-Hans) .font-display,
:lang(zh-Hans) .font-body,
:lang(zh-Hans) .font-thai {
    font-family: 'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans SC', 'Sarabun', system-ui, sans-serif
}

:lang(vi) .font-sans,
:lang(vi) .font-display,
:lang(vi) .font-body,
:lang(vi) .font-thai {
    font-family: 'Sarabun', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif
}

:lang(th) .font-sans,
:lang(th) .font-display,
:lang(th) .font-body,
:lang(th) .font-thai {
    font-family: 'Sarabun', 'Leelawadee UI', 'Noto Sans Thai', system-ui, sans-serif
}

/* The language switcher's chevron.

   It carried `peer-checked:rotate-180`, and Tailwind's `peer` variant compiles to a *sibling*
   combinator — `.peer:checked ~ .peer-checked\:rotate-180`. The icon is a descendant of the
   label, not a sibling of the checkbox, so the rule matched nothing and the chevron never
   turned. Written as what it actually needs to be. */
#lang-toggle:checked ~ label .lang-chevron {
    transform: rotate(180deg);
}

/* Language picker: a quiet branded rail in place of the Windows arrow scrollbar. */
.cv-lang-menu {
    scrollbar-gutter: stable;
}
@supports (-moz-appearance: none) {
    .cv-lang-menu { scrollbar-width: thin; scrollbar-color: var(--cv-primary) transparent; }
}
.cv-lang-menu::-webkit-scrollbar { width: 10px; }
.cv-lang-menu::-webkit-scrollbar-track { background: transparent; margin-block: 12px; }
.cv-lang-menu::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: linear-gradient(180deg, #5a60ff, #4b00ff) padding-box;
}
.cv-lang-menu::-webkit-scrollbar-thumb:hover {
    background: var(--cv-primary) padding-box;
}
.cv-lang-menu::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.cv-lang-menu::-webkit-scrollbar-corner { background: transparent; }

/* Secondary install action remains distinct from the card in either theme. */
.cv-install-card [data-cv="later"] { background:var(--cv-bg-subtle); border:1px solid var(--cv-border); color:var(--cv-text); box-shadow:0 1px 2px #17122c0a; }
.cv-install-card [data-cv="later"]:hover { background:var(--cv-accent-soft); border-color:var(--cv-primary); color:var(--cv-accent-text); }
.cv-install-card [data-cv="later"]:focus-visible { outline:3px solid var(--cv-primary); outline-offset:3px; }
.cv-process-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-bottom:2.5rem; }
.cv-process-gallery figure { position:relative; overflow:hidden; border-radius:22px; margin:0; }
.cv-process-gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s; }
.cv-process-gallery span { position:absolute; top:1rem; left:1rem; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#fff; color:#4b00ff; font-weight:800; box-shadow:0 5px 20px #0002; }
@media(hover:hover) and (prefers-reduced-motion:no-preference){.cv-process-gallery figure:hover img{transform:scale(1.05)}}
@media(max-width:520px){.cv-process-gallery{gap:.5rem}.cv-process-gallery figure{border-radius:12px}.cv-process-gallery img{aspect-ratio:3/4}.cv-process-gallery span{width:28px;height:28px;top:.5rem;left:.5rem;font-size:.75rem}}

/* Public international presentation. Scoped to marketing components, never the app shell. */
.cv-public-hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.cv-public-hero__copy { min-width:0; text-align:start; }
.cv-public-hero__copy h1 { font-size:clamp(2.1rem,4.2vw,4rem); text-wrap:balance; }
.cv-public-hero__copy .cv-lead { max-width:38rem; }
.cv-public-art { position:relative; min-width:0; width:100%; margin:0; padding:2rem 1.2rem 3rem; isolation:isolate; perspective:1100px; }
.cv-public-art__halo { position:absolute; inset:0; z-index:-1; border-radius:50%; background:radial-gradient(ellipse,rgba(82,67,255,.2),rgba(0,205,222,.08) 60%,transparent 70%); }
.cv-public-art__photo { display:block; width:100%; aspect-ratio:4/4.3; object-fit:cover; border:6px solid var(--cv-bg); border-radius:2rem; transform:rotate(-3deg); box-shadow:0 25px 65px #22164b30; }
.cv-public-art--chatmai .cv-public-art__photo { border-radius:45% 45% 2rem 2rem; transform:rotate(2deg); }
.cv-public-art__token { position:absolute; top:.7rem; right:.2rem; width:72px; height:72px; display:grid; place-items:center; border:1px solid var(--cv-border); border-radius:22px; background:var(--cv-bg); color:var(--cv-primary); box-shadow:0 12px 32px #24175d22; transform:rotate(8deg); }
.cv-public-art__greetings { position:absolute; bottom:3.5rem; left:0; right:0; display:flex; justify-content:center; gap:.4rem; flex-wrap:wrap; }
.cv-public-art__greetings span { padding:.55rem .8rem; border-radius:99px; border:1px solid var(--cv-border); background:var(--cv-bg); color:var(--cv-text); box-shadow:0 8px 18px #1b164c14; font-size:.8rem; }
.cv-public-art figcaption { text-align:end; color:var(--cv-muted); font-size:.75rem; position:absolute; bottom:.4rem; right:1rem; }
.cv-chatmai-mark { width:76px; height:76px; border-radius:20px; margin-bottom:1.2rem; }
.cv-world { background:linear-gradient(150deg,var(--cv-bg-subtle),var(--cv-bg)); overflow:clip; }
.cv-world__intro { max-width:790px; margin:0 auto 2.5rem; text-align:center; }
.cv-world__intro .cv-h2 { margin:1rem 0; }
.cv-world__photos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; align-items:center; }
.cv-world__photos img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:24px; border:5px solid var(--cv-bg); box-shadow:0 18px 45px #25145318; }
.cv-world__photos img:nth-child(2) { aspect-ratio:1; }
.cv-world__languages { display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; }
.cv-world__languages span { padding:.6rem 1rem; border:1px solid var(--cv-border); border-radius:99px; background:var(--cv-bg); color:var(--cv-text); font-size:.9rem; }
.cv-world .cv-media-caption { text-align:center; }
.cv-document-art { position:relative; width:116px; height:108px; margin-bottom:1.5rem; isolation:isolate; }
.cv-document-art__disc { position:absolute; inset:5px; border-radius:50%; background:linear-gradient(135deg,#6a5cff26,#00cdd924); border:1px solid #8174ff30; }
.cv-document-art__tile { position:absolute; inset:13px 17px; display:grid; place-items:center; border-radius:22px; background:var(--cv-bg); color:var(--cv-primary); border:1px solid var(--cv-border); box-shadow:0 12px 25px #30227220; transform:rotate(-7deg); }
.cv-document-art i { width:13px; height:13px; background:#12bed1; border-radius:4px; position:absolute; right:0; top:20px; transform:rotate(18deg); }
.cv-document-art i:last-child { width:9px;height:9px;left:3px;top:auto;bottom:8px;background:#a861ff; }
.legal-hero .cv-document-art { margin-inline:auto; }
.cv-sample-notice { padding:1rem 1.2rem; margin-bottom:1.5rem; border-inline-start:3px solid var(--cv-primary); border-radius:0 12px 12px 0; background:var(--cv-bg-subtle); color:var(--cv-muted); font-size:.85rem; line-height:1.7; }
.cv-chapter-photo { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:20px; margin:1.3rem 0; }
.cv-feature-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; border:0; }
.cv-feature-panels .cv-faq__item { border:1px solid var(--cv-border); border-radius:16px; background:var(--cv-bg-subtle); overflow:hidden; }
@media(prefers-reduced-motion:no-preference){
 .cv-public-art__photo { animation:cv-art-enter .9s ease-out both; }
 .cv-public-art__token { animation:cv-art-enter 1.2s ease-out both; }
 @supports(animation-timeline:view()) {
  .cv-world__photos img { animation:cv-scroll-photo linear both; animation-timeline:view(); animation-range:entry 0% entry 100%; }
 }
}
@keyframes cv-art-enter { from { opacity:0;translate:0 22px; } to { opacity:1;translate:0 0; } }
@keyframes cv-scroll-photo { from { scale:.93; } to { scale:1; } }
@media(max-width:900px){.cv-public-hero{grid-template-columns:1fr;gap:1.5rem}.cv-public-art{max-width:520px;justify-self:center}.cv-public-art__photo{aspect-ratio:16/11}.cv-world__photos{gap:.6rem}.cv-world__photos img{border-width:3px;border-radius:16px}}
@media(max-width:520px){.cv-public-art{padding:1.5rem .8rem 2.5rem}.cv-public-art__token{width:54px;height:54px;border-radius:16px}.cv-world__photos{grid-template-columns:1fr 1fr}.cv-world__photos img{aspect-ratio:1}.cv-world__photos img:last-child{grid-column:1/-1;aspect-ratio:16/8}.cv-world__languages{gap:.4rem}.cv-world__languages span{padding:.45rem .7rem;font-size:.8rem}.cv-feature-panels{grid-template-columns:1fr}}

.lang-switcher>summary{list-style:none}.lang-switcher>summary::-webkit-details-marker{display:none}.lang-switcher[open] .lang-chevron{transform:rotate(180deg)}.lang-switcher>summary:focus-visible{outline:3px solid var(--cv-primary);outline-offset:3px;border-radius:10px}
.cv-product-chapter{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.cv-product-chapter>.grid{display:block}.cv-product-chapter>.grid>div:first-child{margin-bottom:1.5rem}.cv-product-chapter .cv-chapter-photo{aspect-ratio:4/3}
@media(min-width:901px){section:nth-of-type(even) .cv-product-chapter>.cv-chapter-visual{order:2}}
@media(max-width:900px){.cv-product-chapter{grid-template-columns:1fr}.cv-product-chapter .cv-chapter-photo{aspect-ratio:16/9}}

/* Complete advertising artwork: retain every headline and CTA inside the image. */
.cv-ad-poster{margin:0;width:100%;min-width:0;max-width:440px;justify-self:center}
.cv-ad-poster__link{display:block;border-radius:18px;overflow:hidden;border:1px solid var(--cv-border);box-shadow:0 18px 45px #19133b20;background:var(--cv-bg-subtle)}
.cv-ad-poster__link:focus-visible{outline:3px solid var(--cv-primary);outline-offset:5px}
.cv-ad-poster__link img{display:block;width:100%;height:auto;object-fit:contain}
.cv-ad-poster figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;flex-wrap:wrap;padding:.9rem .1rem;color:var(--cv-text);line-height:1.5}
.cv-ad-poster figcaption strong{font-size:.9rem}.cv-ad-poster figcaption a{font-size:.75rem;color:var(--cv-muted)}
.cv-ad-poster .cv-media-caption{margin-top:0;line-height:1.65}
.cv-banner-gallery{background:var(--cv-bg-subtle)}
.cv-banner-gallery__intro{max-width:850px;margin-bottom:2rem}.cv-banner-gallery__intro .cv-lead{margin-top:1rem}
.cv-banner-gallery__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;align-items:start}
.cv-banner-gallery__grid .cv-ad-poster__link{border-radius:14px}
.cv-banner-gallery>.cv-wrap>.cv-media-caption{margin-top:1rem}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.cv-ad-poster__link{transition:translate .25s ease,box-shadow .25s ease}.cv-ad-poster__link:hover{translate:0 -5px;box-shadow:0 24px 50px #19133b30}}
@media(max-width:1000px){.cv-banner-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}}
@media(max-width:520px){.cv-banner-gallery__grid{grid-template-columns:1fr;gap:1.6rem}.cv-banner-gallery__grid .cv-ad-poster{max-width:380px;margin-inline:auto}}