/* Language controls share the C4 surfaces, motion and focus treatment. */
.language-trigger {
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface-raised);color:var(--text);flex-shrink:0;
  font-size:11px;font-weight:650;line-height:1;white-space:nowrap;
  transition:transform .2s var(--ease),background .2s,color .2s,box-shadow .2s,border-color .2s;
}
.language-trigger .icon {width:17px;height:17px;}
@media(hover:hover) {
 .language-trigger:hover {background:var(--tint);border-color:var(--brand);color:var(--brand);transform:translateY(-2px);box-shadow:0 7px 20px color-mix(in srgb,var(--brand) 15%,transparent);}
 .language-option:hover {background:var(--tint);border-color:var(--brand);transform:translateY(-2px);box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 9%,transparent);}
}
.language-trigger:active,.language-option:active {transform:scale(.97);}
.language-trigger:focus-visible,.language-option:focus-visible {outline:3px solid var(--brand);outline-offset:4px;}
.language-dialog {
  width:min(850px,calc(100vw - 40px));max-width:850px;max-height:min(810px,calc(100dvh - 48px));
  padding:34px;border:1px solid var(--line);border-radius:30px;background:var(--bg);color:var(--text);
  box-shadow:0 40px 140px #0004;overflow-y:auto;overscroll-behavior:contain;
}
.language-dialog::backdrop {background:#031b2c88;backdrop-filter:blur(12px);}
.language-heading {display:flex;gap:15px;align-items:center;margin-block-end:24px;}
.language-heading h2 {font-size:clamp(23px,3vw,32px);margin:4px 0 0;padding:0;line-height:1.25;}
.language-heading .eyebrow {margin:0;font-size:10px;}
.language-emblem {display:grid;place-items:center;width:48px;height:48px;border-radius:17px;background:var(--tint);color:var(--brand);flex-shrink:0;}
.language-emblem .icon {width:25px;height:25px;}
.language-close {position:static;margin-inline-start:auto;align-self:flex-start;flex-shrink:0;font-size:24px;}
.language-search-wrap {display:flex;align-items:center;position:relative;margin-block-end:22px;}
.language-search-wrap>.icon {position:absolute;inset-inline-start:17px;color:var(--muted);pointer-events:none;}
.language-search-wrap input {width:100%;min-height:52px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text);padding:12px 18px;padding-inline-start:48px;font-size:15px;outline:none;}
.language-search-wrap input:focus {border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent);}
.language-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.language-option {position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-height:79px;text-align:start;padding:14px 16px;padding-inline-end:34px;border:1px solid var(--line);border-radius:17px;color:var(--text);background:var(--surface-raised);transition:transform .2s var(--ease),background .2s,border-color .2s,box-shadow .2s;}
.language-option strong {font-family:system-ui,sans-serif;font-size:16px;font-weight:600;line-height:1.5;}
.language-option>span:not(.language-check) {font-size:11px;line-height:1.3;color:var(--muted);}
.language-option[aria-pressed=true] {background:var(--tint);border-color:var(--brand);}
.language-check {position:absolute;inset-inline-end:15px;top:50%;transform:translateY(-50%);color:var(--brand);font-size:14px;}
.language-option:not([aria-pressed=true]) .language-check {opacity:0;}
.language-empty {padding:45px 20px;text-align:center;}
.language-empty p {color:var(--muted);margin-top:8px;}
.language-status {font-size:12px;color:var(--muted);margin-top:12px;min-height:0;}
.language-status:empty {display:none;}
.language-dialog[aria-busy=true] .language-grid {opacity:.55;pointer-events:none;}
/* Wide translations may wrap instead of pushing cards or controls off screen. */
html:not([lang=en]) .btn {white-space:normal;text-align:center;line-height:1.4;}
html:not([lang=en]) .app-sidebar nav a {line-height:1.45;}
html:not([lang=en]) .app-stat,.app-heading>div,.app-content,.app-shell>* {min-width:0;}
html:not([lang=en]) .hero h1 {max-width:900px;}
html:not([lang=en]) .hero-content {padding-block:70px 140px;}
html:not([lang=en]) .hero {min-height:650px;height:auto;}
html:not([lang=en]) .hero-shell {height:auto;}
html:not([lang=en]) .form-actions {flex-wrap:wrap;}
html:not([lang=en]) .app-heading {gap:20px;flex-wrap:wrap;}
html:not([lang=en]) .button-row {flex-wrap:wrap;}
html:not([lang=en]) .btn,.language-option {overflow-wrap:anywhere;}
html:is([lang=ar],[lang=fa],[lang=ur],[lang=hi],[lang=bn],[lang=ta],[lang=pa],[lang=am],[lang=th],[lang=ja],[lang=ko],[lang=zh-Hans]) body {font-family:"DM Sans",system-ui,"Noto Sans",sans-serif;line-height:1.75;}
html:is([lang=ar],[lang=fa],[lang=ur],[lang=hi],[lang=bn],[lang=ta],[lang=pa],[lang=am],[lang=th],[lang=ja],[lang=ko],[lang=zh-Hans]) :is(h1,h2,h3,h4,.eyebrow,.app-sidebar-title,.mini-tag,.badge,.btn,.brand-copy,.step-no,.passport-wordmark) {font-family:"Manrope",system-ui,"Noto Sans",sans-serif;letter-spacing:normal;}
html:is([lang=ar],[lang=fa],[lang=ur],[lang=hi],[lang=bn],[lang=ta],[lang=pa],[lang=am],[lang=th]) :is(h1,h2,h3,h4) {line-height:1.4;}
html[lang=th] {line-break:auto;}
/* Use reading order for the interface; brand marks and photographs retain their orientation. */
html[dir=rtl] .brand {direction:ltr;}
html[dir=rtl] .app-sidebar {border-right:0;border-left:1px solid var(--line);}
html[dir=rtl] .dropdown {left:auto;right:-20px;text-align:right;}
html[dir=rtl] .hero-photo {transform:none;}
html[dir=rtl] .hero:before {background:linear-gradient(270deg,#06243cf0 0%,#06243cd9 28%,#06243c77 60%,#06243c11 100%);}
html[dir=rtl] .hero-note .circle-arrow {margin-left:0;margin-right:15px;}
html[dir=rtl] .search-input>.icon,html[dir=rtl] .search-field>.icon {left:auto;right:16px;}
html[dir=rtl] :is(.search-input,.search-field) input {padding-right:48px;padding-left:16px;}
html[dir=rtl] .dialog-close {right:auto;left:12px;}
html[dir=rtl] #dialog-title {padding-right:0;padding-left:30px;}
html[dir=rtl] .dialog-list {padding-left:0;padding-right:20px;}
html[dir=rtl] :is(.text-link,.btn,.circle-arrow,.card-footer) [data-icon=arrow],html[dir=rtl] .breadcrumb [data-icon=chevron] {scale:-1 1;}
html[dir=rtl] :is(input[type=email],input[type=url]) {direction:ltr;text-align:left;}
html[dir=rtl] .c4ai-message-user {direction:auto;}
@media(max-width:1250px) and (min-width:1001px) {
 html:not([lang=en]) .nav-links {gap:16px;}
 html:not([lang=en]) .site-header .brand-copy {display:none;}
}
@media(max-width:1000px) {
 .nav-actions {gap:8px;}
 html:not([lang=en]) .hero-content {padding-block:60px 150px;}
}
@media(max-width:700px) {
 .language-dialog {width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:22px 16px;border-radius:25px;}
 .language-heading {gap:10px;margin-block-end:20px;}
 .language-heading h2 {font-size:22px;}
 .language-emblem {width:42px;height:42px;border-radius:15px;}
 .language-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
 .language-option {min-height:77px;padding:12px;padding-inline-end:28px;}
 .language-option strong {font-size:15px;}
 .language-check {inset-inline-end:10px;}
 .language-trigger {padding:0 9px;gap:5px;font-size:10px;}
 .site-header .brand-copy {display:none;}
 .site-header .brand-mark {width:51px;height:39px;}
 .site-header .nav-wrap {gap:10px;}
 .nav-actions {gap:6px;}
 .nav-actions>.btn {max-width:128px;padding:10px 14px;gap:8px;}
 .nav-actions>.btn .icon {display:none;}
 html:not([lang=en]) .hero {min-height:690px;}
 html:not([lang=en]) .hero-content {padding-block:58px 145px;}
 html:not([lang=en]) .hero h1 {font-size:clamp(35px,8.5vw,52px);}
 html:not([lang=en]) .hero-note {max-width:100%;}
 html:not([lang=en]) .hero-note strong {font-size:13px;}
 html:not([lang=en]) .foundation-items {flex-wrap:wrap;justify-content:center;}
 html:not([lang=en]) .preview-banner {flex-wrap:wrap;gap:2px 10px;}
 html[dir=rtl] .app-sidebar {border-left:0;}
 html[dir=rtl] .dropdown {right:0;}
 html[dir=rtl] .hero-note .circle-arrow {margin-right:auto;}
 .footer-bottom .language-trigger {margin-inline-end:auto;}
}
@media(prefers-reduced-motion:reduce) {
 .language-trigger,.language-option {transition:none;}
 .language-trigger:hover,.language-option:hover {transform:none;}
}

html[dir=rtl] .search-field input {padding-right:48px !important;padding-left:16px !important;}
html[dir=rtl] .app-list-item {text-align:right !important;}
html[dir=rtl] .profile-summary .row>.badge {margin-left:0 !important;margin-right:auto;}
html:not([lang=en]) .app-top {flex-wrap:wrap;gap:20px;}
html:not([lang=en]) .app-top>div {min-width:0;}
html:not([lang=en]) .app-tile {min-width:0;}
html:not([lang=en]) :is(.app-tile h3,.app-stat span) {overflow-wrap:anywhere;hyphens:auto;}
html:not([lang=en]) :is(h1,h2,h3,h4) {overflow-wrap:anywhere;hyphens:auto;}
/* Override the shared input padding so the search icon has its own clear space. */
#language-search {padding:12px 18px;padding-inline-start:48px;min-height:52px;font-size:16px;border-radius:16px;}

/* The language chooser stands in the centre of the screen everywhere (the application's base styles reset every
   margin, which had let the dialog sit at the top left), and rises as a bottom sheet on phones. Each card carries
   its flag at the top right; the check sits at the bottom right (founder, 26 October 2026). */
.language-dialog {position:fixed;inset:0;margin:auto;}
.language-option {padding-inline-end:52px;}
.language-flag {position:absolute;top:9px;inset-inline-end:12px;font-size:19px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;}
.language-check {top:auto;bottom:10px;inset-inline-end:14px;transform:none;}
@media(max-width:700px) {
 .language-dialog {inset:auto 0 0 0;margin:0;width:100vw;max-width:none;max-height:calc(100dvh - 28px);border-radius:28px 28px 0 0;padding:14px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -24px 80px #0005;}
 .language-dialog::before {content:"";display:block;width:44px;height:5px;margin:0 auto 14px;border-radius:999px;background:var(--line);}
 .language-flag {top:7px;inset-inline-end:9px;font-size:17px;}
 .language-check {bottom:8px;inset-inline-end:10px;}
 @media(prefers-reduced-motion:no-preference) {.language-dialog[open] {animation:c4-sheet-up .26s ease-out;}}
}
@keyframes c4-sheet-up {from {transform:translateY(24px);opacity:.6;} to {transform:none;opacity:1;}}

/* Flags, large and bare, waving in a steady breeze (founder, 26 October 2026: "bigger, like wind is blowing
   it", "remove the white card the flag is sitting on"); the USA flag stands for English. Still under reduced motion. */
.language-option {padding-inline-end:76px;}
.language-flag {top:6px;inset-inline-end:10px;display:block;width:auto;height:auto;padding:0;border-radius:0;font-size:42px;line-height:1;background:none;box-shadow:none;filter:drop-shadow(0 5px 7px rgb(8 46 71 / .35));transform-origin:8% 50%;animation:c4-flag-wave 2.6s ease-in-out infinite;will-change:transform;}
.language-flag::after {content:none;}
.language-option:nth-child(3n+2) .language-flag {animation-delay:-.85s;}
.language-option:nth-child(3n) .language-flag {animation-delay:-1.7s;}
.language-option:nth-child(5n+3) .language-flag {animation-duration:3.1s;}
@keyframes c4-flag-wave {
  0% {transform:perspective(140px) rotateY(0deg) skewY(0deg) translateY(0);}
  25% {transform:perspective(140px) rotateY(-18deg) skewY(3deg) translateY(-1px);}
  50% {transform:perspective(140px) rotateY(3deg) skewY(-1.5deg) translateY(0);}
  75% {transform:perspective(140px) rotateY(-11deg) skewY(2deg) translateY(1px);}
  100% {transform:perspective(140px) rotateY(0deg) skewY(0deg) translateY(0);}
}
@media(max-width:700px) {.language-option {padding-inline-end:64px;} .language-flag {top:6px;inset-inline-end:8px;font-size:34px;}}
@media(prefers-reduced-motion:reduce) {.language-flag {animation:none;}}

/* The language cards stand off the page like the other raised cards (founder, 26 October 2026: "jumping out of
   the screen"), on the website and in the console alike; the flags a size up, responsive. */
.language-option {border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface,#fff) 96%,#fff),var(--surface,#fff));box-shadow:0 1px 0 #fff inset,0 1px 2px rgb(8 46 71 / .06),0 8px 18px -10px rgb(8 46 71 / .4),0 18px 34px -22px rgb(8 46 71 / .4);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease;padding-inline-end:84px;}
@media(hover:hover) {.language-option:hover {transform:translateY(-4px);box-shadow:0 1px 0 #fff inset,0 2px 4px rgb(8 46 71 / .06),0 14px 26px -12px color-mix(in srgb,var(--brand,#dc240c) 50%,rgb(8 46 71 / .4)),0 30px 50px -26px rgb(8 46 71 / .5);}}
.language-option:active {transform:translateY(0) scale(.985);}
[data-theme="dark"] .language-option {box-shadow:0 1px 0 #ffffff12 inset,0 8px 18px -10px #000c,0 18px 34px -22px #000b;}
.language-flag {font-size:50px;top:4px;inset-inline-end:12px;}
@media(max-width:1000px) {.language-flag {font-size:44px;}}
@media(max-width:700px) {.language-option {padding-inline-end:70px;} .language-flag {font-size:40px;top:5px;inset-inline-end:9px;}}
@media(max-width:380px) {.language-option {padding-inline-end:62px;} .language-flag {font-size:34px;}}
/* The flag outranks every meta-text rule, including readability.css's `:root :is(... .language-option > span ...)` (0,3,1). */
:root .language-dialog .language-option>span.language-flag {font-size:50px;line-height:1;color:inherit;}
@media(max-width:1000px) {:root .language-dialog .language-option>span.language-flag {font-size:44px;}}
@media(max-width:700px) {:root .language-dialog .language-option>span.language-flag {font-size:40px;}}
@media(max-width:380px) {:root .language-dialog .language-option>span.language-flag {font-size:34px;}}