@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/outfit-bold-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Gentium Plus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/gentium-plus-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Inria Serif";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/inria-serif-300-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Inria Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inria-serif-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("assets/fonts/roboto-var-latin.woff2") format("woff2");
}

:root { --paper:#f7f4f4; --ink:#1a1a1a; --blue:#1246ae; --warm:#a89f92; --footer:#0f0f0f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html.lenis,html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-stopped { overflow:clip; }
body { background:var(--paper); color:var(--ink); font-family:"Inter",sans-serif; margin:0; overflow-x:hidden; }
a { color:inherit; }
img { display:block; max-width:100%; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3,.vision-copy { font-family:Georgia,"Times New Roman",serif; font-weight:400; }

.site-header { align-items:center; background:#fffefc; box-shadow:0 0 77px rgb(42 53 153 / 15%); display:flex; height:64px; justify-content:space-between; left:0; padding:0 5vw; position:absolute; right:0; top:0; z-index:10; }
.brand { display:block; height:36.591px; overflow:hidden; text-decoration:none; width:222px; }
.brand-lockup { display:block; height:100%; position:relative; width:100%; }
.brand-mark { height:21.864px; left:9.67px; position:absolute; top:8px; width:25.227px; }
.brand-mark img { max-width:none; position:absolute; }
.brand-mark .brand-union { bottom:15.38%; height:auto; left:13.33%; right:6.67%; top:0; width:auto; }
.brand-mark .brand-base { height:100%; inset:0; width:100%; }
.brand-mark .brand-vector { bottom:0; height:100%; left:13.33%; right:0; top:0; width:86.67%; }
.brand-wordmark { font-family:"Outfit",sans-serif; font-size:20.182px; font-weight:700; left:46.67px; letter-spacing:0; line-height:16.818px; position:absolute; top:9.68px; white-space:nowrap; }
.desktop-nav { align-items:center; display:flex; gap:30px; }
.desktop-nav a { font-size:14px; letter-spacing:1px; line-height:22.4px; text-decoration:none; }
.nav-contact { background:#1a1a1a; border-radius:5px; color:#fff; padding:7.5px 20px 7.9px; }
.menu-btn { background:transparent; border:0; cursor:pointer; display:none; height:44px; min-height:44px; min-width:44px; padding:10px; width:44px; }
.menu-btn span { background:currentColor; display:block; height:1px; margin:5px 0; width:22px; }

.hero { background:#f7f4f4; height:805px; overflow:hidden; position:relative; }
.hero::after { background:linear-gradient(180.08deg,#f9f6f0 .44%,rgb(246 246 246 / 0%) 90.51%); content:""; height:228px; left:-7px; opacity:.88; pointer-events:none; position:absolute; top:64px; width:calc(100% + 7px); }
.hero-art { background-image:url("assets/figma-106/72b676755d023ede62355f1b8555e1a3f895ff17.png"); background-position:center; background-repeat:no-repeat; background-size:cover; height:895.633px; left:-3.36px; position:absolute; top:-4.3px; transform:rotate(-.4deg); width:1434.007px; }
.hero-content { left:8.75vw; max-width:663px; position:absolute; top:378px; z-index:1; }
.hero h1 { font-size:64px; letter-spacing:-.78px; line-height:64px; white-space:nowrap; }
.hero h1 span { color:var(--blue); }
.hero-content > p { font-size:18px; line-height:25px; margin-top:41px; max-width:663px; opacity:.88; }
.hero-actions,.join-actions { display:flex; gap:13.99px; margin-top:52.99px; }
.button { align-items:center; border-radius:5px; display:inline-flex; font-size:15px; font-weight:500; gap:7.99px; height:45px; justify-content:center; line-height:24px; padding:0 27px; text-decoration:none; white-space:nowrap; }
.button-dark { background:#1a1a1a; border:1px solid #8d8d8d; color:#dfedff; min-width:204px; }
.button-blue { background:linear-gradient(#6182bf,#869ebb); border:1px solid rgb(255 255 255 / 37%); color:#fff; min-width:109px; }
.button-arrow { height:17px; width:17px; }
.button-arrow-dark { display:none; }

.vision { display:grid; grid-template-columns:19.236vw minmax(0,1fr); height:275px; margin-left:8.542vw; margin-top:2px; position:relative; width:89.306vw; z-index:2; }
.vision-art { border:.5px solid #bbb; height:275px; overflow:hidden; position:relative; width:100%; }
.vision-art img { height:166.98%; left:-92.94%; max-width:none; position:absolute; top:-.68%; width:193.05%; }
.vision-copy { align-items:center; background:rgb(0 0 0 / 86%); color:#fff5e7; display:flex; font-size:24px; height:275px; line-height:36px; min-width:0; padding:69px 5.903vw; width:100%; }
.vision-copy p { max-width:798px; width:100%; }

.approach { background:#f7f5f4; color:#1a1a1a; height:857px; position:relative; }
.approach-card { background:#f3f1ef; height:857px; left:2.222vw; overflow:hidden; position:absolute; top:0; width:95.556vw; }
.approach-heading { left:6.667vw; max-width:640px; position:absolute; top:65.25px; z-index:2; }
.eyebrow { color:#b8542e; font-family:"Roboto","Inter",sans-serif; font-size:12px; font-weight:600; letter-spacing:1.68px; line-height:19.2px; text-transform:uppercase; }
.approach h2 { font-size:48px; letter-spacing:-.46px; line-height:51.52px; margin-top:14.6px; white-space:nowrap; }
.approach h2 span { color:var(--warm); }
.approach-stage { height:100%; inset:0; position:absolute; z-index:1; }
.inference-copy { border-left:.65px solid #777; height:193px; left:4.583vw; padding-left:27px; position:absolute; top:559px; width:30.208vw; }
.inference-copy::before { background:#777; content:""; height:98px; left:-2px; position:absolute; top:0; width:3px; }
.inference-copy h3 { font-size:36px; letter-spacing:-.2px; line-height:32px; position:absolute; top:-5px; white-space:nowrap; }
.inference-copy p { color:#555; font-size:21px; line-height:25px; max-width:22.153vw; position:absolute; top:105px; }
.device-media { height:679.373px; left:35.886vw; mix-blend-mode:darken; overflow:hidden; position:absolute; top:88.48px; width:56.302vw; }
.device-media video,.device-poster { height:100%; inset:0; object-fit:cover; position:absolute; width:100%; }
.device-poster { transition:opacity .45s ease-out; z-index:2; }
.device-media video { transform:scaleX(1.008); transform-origin:center; z-index:1; }
.device-media.video-is-playing .device-poster { opacity:0; }

.join { align-items:center; background:#faf9f7; display:flex; height:611px; justify-content:center; overflow:hidden; padding:100px 160px; position:relative; }
.join-backdrop { background-image:linear-gradient(180deg,#f8f6f2,rgb(255 255 255 / 0%)),url("assets/figma-106/44bb1f778fc81f63a631cc5326e944364119210d.png"); background-position:center bottom; background-size:cover; inset:0; position:absolute; }
.join-card { align-items:center; background:linear-gradient(#f0efed,rgb(241 240 237 / 70%)); border:.5px solid #666460; color:#1a1a1a; display:flex; flex-direction:column; max-width:720px; padding:64.75px 32.5px 60.49px; position:relative; text-align:center; width:720px; }
.join-card .eyebrow { color:#628aa8; }
.join h2 { font-size:40px; letter-spacing:-.4px; line-height:64px; margin-top:15.3px; }
.join-card > p:not(.eyebrow) { color:#776f63; font-size:17px; line-height:27.2px; max-width:480px; }
.join-actions { gap:14px; margin-top:14.7px; }
.join-actions .button-dark { color:#fff; min-width:136px; padding:0 30px; }
.join-actions .button-blue { min-width:109px; }
.role-tooltip-wrap { position:relative; }
.role-tooltip-trigger { cursor:pointer; font-family:inherit; }
.role-tooltip { background:#161616; border:1px solid rgb(255 255 255 / 22%); border-radius:5px; bottom:57px; box-shadow:0 8px 24px rgb(0 0 0 / 18%); color:#f7f4f4; font-size:13px; left:50%; line-height:20px; opacity:0; padding:10px 13px; pointer-events:none; position:absolute; transform:translate(-50%,4px); user-select:text; visibility:hidden; white-space:nowrap; z-index:5; }
.role-tooltip::after { border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid #161616; content:""; left:50%; position:absolute; top:100%; transform:translateX(-50%); }
.role-tooltip-wrap[data-open="true"] .role-tooltip { opacity:1; pointer-events:auto; transform:translate(-50%,0); visibility:visible; }
.role-tooltip-email { color:#d3e1ff; text-decoration:underline; text-underline-offset:2px; }

footer { background:var(--footer); color:#b3aa9c; height:386px; }
/* Footer content sits in the same centered 1456px band as the header (72px inset at 1440, growing
   past 1600), so the brand / Explore / © all share the page's content left edge. */
.footer-main { display:grid; gap:60px; grid-template-columns:1.4fr 1fr; height:316px; padding:72px max(72px, calc(50% - 728px)) 44px; }
.footer-main > div:first-child { display:flex; flex-direction:column; gap:21.6px; }
/* Typeface / colour / weight decisions live here in the base rules so desktop and mobile share one
   design system; the breakpoint blocks below only change sizes, spacing and layout. */
.footer-brand { align-items:center; color:#fff; display:flex; font-family:"Outfit",sans-serif; font-size:22px; font-weight:700; gap:12px; letter-spacing:0; line-height:35.2px; text-decoration:none; }
.footer-brand-icon { height:24px; width:auto; }
.footer-main p { font-family:"Roboto","Inter",sans-serif; font-size:16px; line-height:25.6px; max-width:380px; }
.footer-email { align-items:center; align-self:flex-start; display:inline-flex; font-family:"Roboto","Inter",sans-serif; font-size:16px; gap:12px; line-height:25.6px; min-height:44.4px; padding-top:4.4px; text-decoration:none; }
.footer-email-icon-wrap { align-items:center; border:1px solid #383229; display:flex; height:40px; justify-content:center; width:40px; }
.footer-email-icon { height:16px; width:16px; }
/* Links flow in one row and wrap to a column only when the cell gets too narrow. */
.footer-main nav { align-content:start; align-items:start; display:flex; flex-wrap:wrap; gap:10px 30px; }
.footer-main nav p { color:#fff; flex:0 0 100%; font-family:Georgia,serif; font-size:16px; line-height:25.6px; margin-bottom:6px; max-width:none; }
.footer-main nav a { font-family:"Roboto","Inter",sans-serif; font-size:14px; line-height:22.4px; text-decoration:none; }
/* Same content band as .footer-main / .light-header; the border-top itself stays full-bleed. */
.footer-bottom { align-items:center; border-top:.5px solid rgb(255 255 255 / 50%); display:flex; font-family:"Roboto","Inter",sans-serif; font-size:13px; min-height:70px; justify-content:space-between; line-height:20.8px; padding:13px max(72px, calc(50% - 728px)); }
.footer-bottom-actions { align-items:center; display:flex; gap:24px; }
.footer-legal-links { align-items:center; display:flex; flex-wrap:wrap; gap:8px 18px; }
.footer-legal-links a { align-items:center; color:#d5cec3; display:inline-flex; min-height:44px; white-space:nowrap; }
.footer-legal-links a:hover,.footer-legal-links a:focus-visible { color:#fff; }
/* Footer language menu (bottom right, user 2026-09-04): the dark dropdown from the reference — the list opens
   UPWARD and shares one rounded outline with the trigger row, which is a shade lighter. The current language
   is marked; all four languages have matching home and careers pages. */
.lang-menu { position:relative; }
.lang-menu-button { align-items:center; background:rgb(255 255 255 / 8%); border:1px solid rgb(255 255 255 / 16%); border-radius:5px; color:#fff; cursor:pointer; display:flex; font:inherit; font-size:14px; gap:10px; height:36px; line-height:20px; padding:0 14px 0 12px; }
.lang-menu-button:hover,.lang-menu-button:focus-visible { background:rgb(255 255 255 / 12%); }
.lang-menu-button:focus-visible { outline:2px solid #3bb4a2; outline-offset:2px; }
.lang-menu-chevron { transition:transform .2s ease; }
.lang-menu[data-open="true"] .lang-menu-button { background:rgb(255 255 255 / 12%); border-radius:0 0 5px 5px; border-top-color:transparent; } /* 5px = the site's button radius (user 2026-09-04) */
.lang-menu[data-open="true"] .lang-menu-chevron { transform:rotate(180deg); }
.lang-menu-list { background:var(--footer); border:1px solid rgb(255 255 255 / 16%); border-bottom:0; border-radius:5px 5px 0 0; bottom:100%; left:0; list-style:none; margin:0; min-width:100%; padding:10px 0 6px; position:absolute; right:0; z-index:3; }
.lang-menu-list a { color:#fff; display:block; font-size:14px; line-height:20px; padding:10px 20px; text-decoration:none; white-space:nowrap; }
.lang-menu-list a:hover,.lang-menu-list a:focus-visible { background:rgb(255 255 255 / 8%); outline:none; }
.lang-menu-list a[aria-current] { color:#aaddd4; }
.footer-bottom a { text-decoration:none; }

/* White version — Figma node 1617:19731 */
/* One design only (2026-09-07): the former A/B split is gone — the teal palette, hero/join art and belief card
   placement live directly in these rules and the blue values/assets were deleted. Do not reintroduce
   `html[data-variant="dark"] .light-main { display:none; }`; that showed the retired legacy dark-main site
   instead, which is no longer wired into the scroll/pin JS below. */
.light-main { display:block; }
.dark-main { display:none; }
body { background:#f4f0ed; }

html[data-variant="light"] .site-header { background:transparent; box-shadow:none; height:0; pointer-events:none; }
html[data-variant="light"] .site-header .brand,
html[data-variant="light"] .site-header .desktop-nav,
html[data-variant="light"] .site-header .menu-btn,
html[data-variant="light"] .site-header .mobile-menu { display:none; }

.figma-frame { display:flex; flex-direction:column; gap:166px; height:100%; justify-content:flex-end; margin:0 auto; max-width:1600px; position:relative; z-index:2; }

.light-main { position:relative; }
/* The bar itself stays full-bleed (its cream background must always span the page); only the
   content is capped — side padding grows once the viewport passes 1600px so brand + nav stay
   within a centered 1456px (= 1600 − 2×72) band, matching .figma-frame's max-width. */
.light-header { align-items:center; background:transparent; box-sizing:border-box; display:flex; height:64px; justify-content:space-between; left:0; padding:0 max(72px, calc(50% - 728px)); position:fixed; right:0; top:0; z-index:5; }
.light-brand { display:block; height:36.591px; overflow:hidden; text-decoration:none; width:222px; }
.light-nav { align-items:center; display:flex; gap:13.99px; } /* same gap as .light-hero-actions */
.light-nav a { color:#030303; font-family:"Roboto","Inter",sans-serif; font-size:14px; letter-spacing:1px; line-height:22.4px; text-decoration:none; }
/* Careers pill — Figma tFncbEkPEyRqS4h7Su8ODE node 1:214, shared by variants A and B. Figma's 1px
   stroke sits inside the 37.4px box, so padding is 1px tighter than the 7.5/20/7.9 spec. */
.light-nav a:not(.light-nav-contact) { background:#fffaf5; border:1px solid rgb(0 0 0 / 29%); border-radius:5px; color:#083733; padding:6.5px 19px 6.9px; }
.light-nav-contact { background:#1a1a1a; border-radius:5px; color:#fff !important; padding:7.5px 20px 7.9px; }
/* The hero is exactly one viewport tall so its copy (bottom-anchored) is always above the fold;
   the old 761px floor pushed the description and CTAs off-screen on short windows. */
.light-hero { background:#f4f0ed; height:100vh; min-height:400px; position:relative; }
/* Hero art: two background layers — on top the real photo via image-set(type()) (AVIF → WebP → JPEG,
   1920w for 1x screens, 2752w for ≥1.5dppx below), underneath an inline 48px WebP LQIP so the hero
   paints immediately and the photo replaces it when it lands. The plain url() declared first is the
   fallback for browsers without image-set. Preloads in <head> mirror this split for variant B. */
.light-hero-art { background-image:url("assets/figma-b-test/hero-art.jpg"),url("data:image/webp;base64,UklGRvwAAABXRUJQVlA4IPAAAABwBgCdASowAB4APrVMoUsnJCMhqrgMAOAWiWkACBvOp/e1Nm/n93kcWKdChHK1eNTztbqArG1H+hUpTAAA/vmZuGQQ9z1X4UxxDsB5RktwxarMDF0hUwESJslp8dG5foWHAxH1g6HA8S5BitrBsDSnGP0TwsDCjKvJxj8QPh4yhTCp50Ehb3kMxZoPmeN3BGG0qwPvkjzPuY7i1GzKJYdfXcAet6usT4qMrp9leZ7Y57oXWqWssuUjfpRqOyQE16emBrlfIVP5KcrDJ9aNTkm2BvoPLJuKNtltmhRi0QmpubwFblquoaAMUflgOns6BAA="); background-image:image-set(url("assets/figma-b-test/hero-art-1920.avif") type("image/avif"),url("assets/figma-b-test/hero-art-1920.webp") type("image/webp"),url("assets/figma-b-test/hero-art.jpg") type("image/jpeg")),url("data:image/webp;base64,UklGRvwAAABXRUJQVlA4IPAAAABwBgCdASowAB4APrVMoUsnJCMhqrgMAOAWiWkACBvOp/e1Nm/n93kcWKdChHK1eNTztbqArG1H+hUpTAAA/vmZuGQQ9z1X4UxxDsB5RktwxarMDF0hUwESJslp8dG5foWHAxH1g6HA8S5BitrBsDSnGP0TwsDCjKvJxj8QPh4yhTCp50Ehb3kMxZoPmeN3BGG0qwPvkjzPuY7i1GzKJYdfXcAet6usT4qMrp9leZ7Y57oXWqWssuUjfpRqOyQE16emBrlfIVP5KcrDJ9aNTkm2BvoPLJuKNtltmhRi0QmpubwFblquoaAMUflgOns6BAA="); background-position:center; background-repeat:no-repeat; background-size:cover; height:994px; left:-5.35%; min-width:1583px; mix-blend-mode:multiply; position:absolute; top:-72px; width:109.93%; z-index:0; }
.light-hero-veil { background:linear-gradient(to top,#f4f0ed 0,#f4f0ed 70px,rgb(244 240 237 / 0%)); height:840px; left:0; pointer-events:none; position:absolute; top:142px; width:100%; z-index:1; }
.light-hero-copy { color:#302925; display:flex; flex-direction:column; gap:27px; margin-bottom:min(50px, 5.56vh); max-width:4000px; padding:0 72px; width:100%; will-change:transform; }
.light-hero h1 { color:#382d22; font-family:"Gentium Plus",Georgia,"Times New Roman",serif; font-size:96px; letter-spacing:-1.0451px; line-height:86px; }
/* zh/index.html (中文首页, generated by .claude/gen-home-langs.py): same rules, but the serif headings name the
   system CJK serif faces so Chinese glyphs fall to Songti / Source Han Serif instead of the browser default.
   Latin stays Gentium / Georgia. Sans text already falls to PingFang / YaHei through the generic family. */
html[lang="zh-CN"] .light-hero h1 { font-family:"Gentium Plus","Songti SC","Noto Serif CJK SC","Source Han Serif SC","Noto Serif SC",Georgia,"Times New Roman",serif; }
html[lang="zh-CN"] :is(.light-approach h2, .light-join-card h2) { font-family:Georgia,"Songti SC","Noto Serif CJK SC","Source Han Serif SC","Noto Serif SC","Times New Roman",serif; }
/* Chinese leading (readability audit 2026-09-04). CJK glyphs fill the whole em box, so the tight Latin display
   leading (hero 0.9, approach heading 0.96) made Chinese lines touch, and 1.4–1.5 body leading reads dense in
   Chinese. These beat the breakpoint rules on specificity, so they hold on every viewport. */
html[lang="zh-CN"] .light-hero h1 { line-height:1.1; }
html[lang="zh-CN"] .light-approach h2 { line-height:1.15; }
html[lang="zh-CN"] :is(.light-hero-desc p, .light-inference p, .light-join-card > p:not(.eyebrow)) { line-height:1.6; }
html[lang="zh-CN"] .light-belief-copy { line-height:1.6; }
.light-hero h1 .motion-line:first-child { margin-bottom:0; }
.light-hero h1 em { color:#008f7f; font-style:normal; }
.light-hero-desc { display:flex; flex-direction:column; padding:0 6px; width:904px; }
.light-hero-desc p { font-family:"Roboto","Inter",sans-serif; font-size:24px; font-weight:300; line-height:32px; margin:0; }
.light-hero-desc .light-hero-kicker { color:#302925; max-width:691px; }
.light-hero-desc p:not(.light-hero-kicker) { max-width:681px; }
.light-hero-actions { align-items:center; display:flex; gap:13.99px; justify-content:flex-start; padding-top:11.99px; width:100%; }
.light-btn { align-items:center; border-radius:5px; box-sizing:border-box; display:flex; font-family:"Roboto","Inter",sans-serif; font-size:15px; font-weight:400; height:45px; line-height:24px; padding:0 27px; text-decoration:none; white-space:nowrap; }
.light-btn-dark { background:#3bb4a2; border:1px solid #aaddd4; color:#fff; gap:7.99px; justify-content:center; min-width:204px; }
.light-btn-dark img { flex-shrink:0; height:17px; width:17px; }
.light-btn-blue { background:#000; border:1px solid rgb(255 255 255 / 65%); color:#fff; justify-content:center; min-width:109px; }

.light-belief { background:#f4f0ed; height:735px; margin-top:0; overflow:hidden; position:relative; }
@media (min-width:768px) {
  .light-belief { height:calc(100vh + 2400px); overflow:visible; }
  .belief-stage { height:100vh; overflow:hidden; position:sticky; top:0; }
  .belief-stage .figma-frame { display:block; height:100%; }
  /* 202px below centre on the 900px canvas (= 22.44vh); on short viewports it scales with the cards
     instead of sliding below the fold. */
  .light-belief-copy { left:0; margin:0 auto; position:absolute; right:0; top:calc(50% + min(202px, 22.44vh)); }
}
.light-belief-copy { color:#476b67; font-family:"Roboto","Inter",sans-serif; font-size:32px; font-weight:300; line-height:43px; margin:0 auto; text-align:center; width:1200px; }
.card-wrap { align-items:center; display:flex; justify-content:center; position:absolute; }
.polaroid-card { border:.5px solid #bbb; border-radius:5px; box-shadow:0 4px 44px rgb(0 0 0 / 8%); flex-shrink:0; overflow:hidden; position:relative; }
.polaroid-card img { height:100%; object-fit:cover; object-position:bottom; position:absolute; width:100%; }
.card-wrap-p1 { height:min(28.416vw,45.466vh); left:calc(50% - min(33.08vw,52.928vh)); top:calc(50% - min(19.108vw,30.573vh)); width:min(27.906vw,44.65vh); }
.card-wrap-p1 .polaroid-card { height:min(23.083vw,36.933vh); transform:rotate(-16.27deg); width:min(22.334vw,35.734vh); }
.card-wrap-p2 { height:min(31.949vw,51.118vh); left:calc(50% - min(4.827vw,7.723vh)); top:calc(50% - min(22.641vw,36.226vh)); width:min(37.907vw,60.651vh); }
.card-wrap-p2 .polaroid-card { height:min(27.91vw,44.656vh); transform:rotate(7.02deg); width:min(34.756vw,55.61vh); }

.light-approach { background:#f4f0ed; height:calc(100vh + 1600px); margin-top:400px; position:relative; }
/* Heading box may extend to just left of the card stack (its left edge sits at 53.57% once the stack
   is vw-scaled) so "not just respond" keeps to one line down to ~850px viewports. */
.light-approach-heading { display:flex; flex-direction:column; gap:22px; left:0; max-width:calc(53.5% + 48px); padding:0 72px 0 78px; position:absolute; top:386px; width:100%; z-index:2; }
.light-approach-heading .eyebrow { color:#5c8982; font-size:17.305px; letter-spacing:2.4227px; line-height:27.688px; }
.light-approach h2 { color:#191919; font-size:64px; letter-spacing:-.0175em; line-height:60px; margin:0; text-transform:none; }
.light-approach h2 .h2-muted { color:#a3bcb8; }
.stack { inset:0; position:absolute; }
.stack .card-wrap { align-items:center; display:flex; justify-content:center; }
/* Stack geometry comes from the 1440×900 canvas in vh; every length is also capped by its vw
   equivalent (1vh = 0.625vw, 1px = 1/14.4vw at that canvas) so the whole stack scales down together
   on narrow-but-tall viewports (iPad, portrait windows) instead of overflowing the right edge.
   At 1440×900 both terms are equal, so the reference layout is unchanged. */
.stack-card { background:#fdf9f7 center / cover no-repeat; border-radius:3px; box-shadow:0 0 48px rgb(0 0 0 / 10%); flex-shrink:0; height:min(56.524vh,35.328vw); width:min(54.096vh,33.81vw); }
.card-wrap-a1 { height:min(61.215vh,38.259vw); left:calc(50% + min(86px,5.972vw) - min(3.849vh,2.406vw)); top:209.54px; width:min(59.018vh,36.886vw); }
.card-wrap-a1 .stack-card { background-image:url("assets/figma-user/stack-a-1.jpg"); background-image:image-set(url("assets/figma-user/stack-a-1.avif") type("image/avif"),url("assets/figma-user/stack-a-1.webp") type("image/webp"),url("assets/figma-user/stack-a-1.jpg") type("image/jpeg")); transform:rotate(-5.22deg); }
.card-wrap-a2 { height:min(58.174vh,36.359vw); left:calc(50% + min(105px,7.292vw) - min(3.641vh,2.276vw)); top:228.54px; width:min(55.822vh,34.889vw); }
.card-wrap-a2 .stack-card { background-image:url("assets/figma-user/stack-a-2.jpg"); background-image:image-set(url("assets/figma-user/stack-a-2.avif") type("image/avif"),url("assets/figma-user/stack-a-2.webp") type("image/webp"),url("assets/figma-user/stack-a-2.jpg") type("image/jpeg")); transform:rotate(1.78deg); }
.card-wrap-a3 { height:min(57.495vh,35.934vw); left:calc(50% + min(101px,7.014vw) - min(3.594vh,2.246vw)); top:233.54px; width:min(55.111vh,34.444vw); }
.card-wrap-a3 .stack-card { background-image:url("assets/figma-user/stack-a-3.jpg"); background-image:image-set(url("assets/figma-user/stack-a-3.avif") type("image/avif"),url("assets/figma-user/stack-a-3.webp") type("image/webp"),url("assets/figma-user/stack-a-3.jpg") type("image/jpeg")); transform:rotate(-1.04deg); }
.card-wrap-a4 { height:min(58.699vh,36.687vw); left:calc(50% + min(96px,6.667vw) - min(3.677vh,2.298vw)); top:233.54px; width:min(56.374vh,35.234vw); }
.card-wrap-a4 .stack-card { background-image:url("assets/figma-user/stack-a-4.jpg"); background-image:image-set(url("assets/figma-user/stack-a-4.avif") type("image/avif"),url("assets/figma-user/stack-a-4.webp") type("image/webp"),url("assets/figma-user/stack-a-4.jpg") type("image/jpeg")); transform:rotate(2.36deg); }
.light-inference { align-items:flex-start; box-sizing:border-box; display:flex; flex-direction:column; gap:4px; height:817px; justify-content:flex-end; max-width:4000px; padding:0 72px; width:100%; }
.light-inference h3 { color:#000; font-family:Georgia,"Times New Roman",serif; font-size:48px; font-weight:400; letter-spacing:0; line-height:44.444px; }
.light-inference p { color:#555; font-family:"Roboto","Inter",sans-serif; font-size:20px; font-weight:300; line-height:30px; max-width:584px; }

@media (min-width:768px) {
  .light-approach .approach-stage { height:100vh; overflow:hidden; position:sticky; top:0; }
  .light-approach .figma-frame { display:block; }
  .light-approach-heading { top:calc(17vh + 2px); }
  /* Shrink-to-fit block capped just left of the card stack (53.57vw − 24px gap, incl. the 72px side
     padding); the h3 never wraps, so the copy below is always at least as wide as the heading. */
  .approach-stage .light-inference { bottom:min(100px, 11.1vh); height:auto; justify-content:flex-start; left:0; max-width:min(728px, calc(53.5vw - 24px)); opacity:0; position:absolute; top:auto; width:auto; will-change:transform,opacity; }
  .approach-stage .card-wrap { opacity:0; will-change:transform,opacity; }
  .card-wrap-a1 { top:calc(50vh - 30.847vh); }
  .card-wrap-a2 { top:calc(50vh - 28.538vh); }
  .card-wrap-a3 { top:calc(50vh - 27.938vh); }
  .card-wrap-a4 { top:calc(50vh - 28.016vh); }
}

.light-join { align-items:center; background:#f4f0ed; display:flex; height:611px; justify-content:center; margin-top:0; overflow:hidden; padding:100px 160px; position:relative; }
/* Photo layers use image-set(type()) with a plain url() declared first as the fallback for browsers
   that don't parse image-set; AVIF/WebP encodes live next to their sources. */
/* join-backdrop.jpg must be the Figma image LAYER (tFncbEkPEyRqS4h7Su8ODE node 1:240) — a screenshot of the whole join
   frame bakes the card into the photo and shows through the translucent real card as a ghost. */
.light-join-backdrop { background-image:linear-gradient(180deg,#f4f0ed,rgb(255 255 255 / 0%)),url("assets/figma-b-test/join-backdrop.jpg"); background-image:linear-gradient(180deg,#f4f0ed,rgb(255 255 255 / 0%)),image-set(url("assets/figma-b-test/join-backdrop-1440.avif") type("image/avif"),url("assets/figma-b-test/join-backdrop-1440.webp") type("image/webp"),url("assets/figma-b-test/join-backdrop.jpg") type("image/jpeg")); background-position:center bottom; background-size:cover; inset:0; position:absolute; }
.light-join-card { align-items:center; background:linear-gradient(#f0efed,rgb(241 240 237 / 70%)); border:.5px solid #666460; color:#1a1a1a; display:flex; flex-direction:column; max-width:720px; padding:65.25px 33px 60.99px; position:relative; text-align:center; width:720px; }
.light-join-card .eyebrow { color:#719791; }
.light-join-card .button-blue { background:#33a190; }
.light-join-card h2 { font-size:40px; letter-spacing:-.4px; line-height:64px; margin:15.3px 0 0; }
.light-join-card > p:not(.eyebrow) { color:#2e2b27; font-family:"Roboto","Inter",sans-serif; font-size:17px; font-weight:300; line-height:27.2px; max-width:480px; }
/* Optical centering for the Chinese sentence ending in full-width punctuation. */
html[lang="zh-CN"] .light-join-card > p:not(.eyebrow) { position:relative; left:.35em; }
.light-join-card .button { font-family:"Roboto","Inter",sans-serif; font-weight:400; }
.light-join-card .join-actions { gap:14px; margin-top:14.7px; }
.light-join-card .button-dark { color:#fff; min-width:136px; padding:0 30px; }

/* Scroll-led reveals: restrained, long easing inspired by Ironhill's narrative pacing. */
.motion-ready .light-main .motion-reveal,
.motion-ready .light-main .motion-image,
.motion-ready .light-main .motion-line,
.motion-ready .light-main .motion-card { opacity:0; }
.motion-ready .light-main .motion-reveal { transform:translateY(42px); transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1); }
.motion-ready .light-main .motion-image { transform:translateY(28px) scale(1.035); transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.4s cubic-bezier(.22,1,.36,1); }
.motion-ready .light-main .motion-line { display:block; transform:translateY(108%); transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1); }
.motion-ready .light-main .motion-line:nth-child(2) { transition-delay:.14s; }
.motion-ready .light-main .motion-line:nth-child(3) { transition-delay:.28s; }
.motion-ready .light-main .light-hero-desc .light-hero-kicker { transition-delay:.7s; }
.motion-ready .light-main .light-hero-desc > .motion-reveal:last-child { transition-delay:1.4s; }
.motion-ready .light-main .light-hero-actions { transition-delay:2.2s; }
.motion-ready .light-main .light-hero h1 .motion-line { transition-duration:.2s,.3s; }
.motion-ready .light-main .light-hero h1 .motion-line:nth-child(2) { transition-delay:.04s; }
.motion-ready .light-main .light-hero-desc > .motion-reveal { transition-duration:.2s,.25s; }
.motion-ready .light-main .light-hero .light-hero-desc .light-hero-kicker { transition-delay:.18s; }
.motion-ready .light-main .light-hero .light-hero-desc > .motion-reveal:last-child { transition-delay:.42s; }
.motion-ready .light-main .light-hero .light-hero-actions { transition-duration:.25s,.3s; transition-delay:.64s; }
.motion-ready .light-main .motion-reveal.is-visible,
.motion-ready .light-main .motion-line.is-visible { opacity:1; transform:none; }
.motion-ready .light-main .motion-image.is-visible { opacity:1; transform:none; }
.motion-ready .light-main .motion-card { transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1.9s cubic-bezier(.16,1,.3,1); }
.motion-ready .light-main .card-wrap-p1.motion-card { transform:translate(-400px,-240px) scale(1.1); }
.motion-ready .light-main .card-wrap-p2.motion-card { transform:translate(400px,-280px) scale(1.1); transition-delay:.12s; }
.motion-ready .light-main .card-wrap-p1.motion-card.is-visible,
.motion-ready .light-main .card-wrap-p2.motion-card.is-visible { opacity:1; transform:none; }
/* Desktop belief cards re-arm every visit (see beliefCardsActive in the scroll script): entrance
   reuses the diagonal offset above, exit is a plain fade-up — never retracing the entrance path.
   motion-snap kills the transition for one frame so a re-triggered entrance can snap back to the
   diagonal start state before animating in again. */
.motion-ready .light-main .motion-card.motion-snap { transition:none; }
.motion-ready .light-main .card-wrap-p1.motion-card.is-exiting,
.motion-ready .light-main .card-wrap-p2.motion-card.is-exiting { opacity:0; transform:translateY(-60px); transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1); }
.kinetic-words .kinetic-word { display:inline-block; opacity:0; transform:translateY(.7em); }
.kinetic-words.is-visible .kinetic-word { animation:word-reveal .48s cubic-bezier(.22,1,.36,1) forwards; animation-delay:calc(.18s + var(--word-index) * 38ms); }
.light-hero-kicker.kinetic-words.is-visible .kinetic-word { animation-duration:.18s; animation-delay:calc(.18s + var(--word-index) * 10ms); }
.light-hero-desc > .kinetic-words.is-visible:not(.light-hero-kicker) .kinetic-word { animation-duration:.18s; animation-delay:calc(.42s + var(--word-index) * 10ms); }
@keyframes word-reveal { to { opacity:1; transform:none; } }

@media (max-width:767.98px) {
  /* P0-3: brand scales to 182px effective width; Careers loses its pill, Contact pill tightens —
     222+228+40 = 490px would overflow a 375px viewport. */
  .light-header { background:#f4f0ed; left:0; padding:0 16px; width:100%; }
  .light-brand { margin-right:-40px; transform:scale(.82); transform-origin:left center; }
  .light-nav { gap:10px; }
  .light-nav a { letter-spacing:.5px; }
  .light-nav a:not(.light-nav-contact) { background:transparent; border:0; padding:7.5px 2px; }
  .light-nav-contact { padding:7.5px 12px 7.9px; }
  .light-hero { height:760px; min-height:760px; overflow:hidden; }
  /* P1-5: min-width:1583px from the base rule must be cleared or the art stays 1583px wide and
     the 70% focal point never shows. Mobile also swaps in a lightweight jpg (P1-7).
     Size: the base rule's `cover` filled the 760px box with a 322%-wide crop that read as oversized
     (user 2026-09-07: 缩小一些，仍要顶对齐). The art is now 220% of the viewport width, still anchored
     to the top edge (`70% top`); the 760px box and the bottom-anchored copy are unchanged, and the veil
     fades the art's lower edge behind the paragraph exactly as before. */
  .light-hero-art { background-image:url("assets/figma-b-test/hero-art-mobile-1440.jpg"),url("data:image/webp;base64,UklGRvwAAABXRUJQVlA4IPAAAABwBgCdASowAB4APrVMoUsnJCMhqrgMAOAWiWkACBvOp/e1Nm/n93kcWKdChHK1eNTztbqArG1H+hUpTAAA/vmZuGQQ9z1X4UxxDsB5RktwxarMDF0hUwESJslp8dG5foWHAxH1g6HA8S5BitrBsDSnGP0TwsDCjKvJxj8QPh4yhTCp50Ehb3kMxZoPmeN3BGG0qwPvkjzPuY7i1GzKJYdfXcAet6usT4qMrp9leZ7Y57oXWqWssuUjfpRqOyQE16emBrlfIVP5KcrDJ9aNTkm2BvoPLJuKNtltmhRi0QmpubwFblquoaAMUflgOns6BAA="); background-image:image-set(url("assets/figma-b-test/hero-art-mobile-1440.avif") type("image/avif"),url("assets/figma-b-test/hero-art-mobile-1440.webp") type("image/webp"),url("assets/figma-b-test/hero-art-mobile-1440.jpg") type("image/jpeg")),url("data:image/webp;base64,UklGRvwAAABXRUJQVlA4IPAAAABwBgCdASowAB4APrVMoUsnJCMhqrgMAOAWiWkACBvOp/e1Nm/n93kcWKdChHK1eNTztbqArG1H+hUpTAAA/vmZuGQQ9z1X4UxxDsB5RktwxarMDF0hUwESJslp8dG5foWHAxH1g6HA8S5BitrBsDSnGP0TwsDCjKvJxj8QPh4yhTCp50Ehb3kMxZoPmeN3BGG0qwPvkjzPuY7i1GzKJYdfXcAet6usT4qMrp9leZ7Y57oXWqWssuUjfpRqOyQE16emBrlfIVP5KcrDJ9aNTkm2BvoPLJuKNtltmhRi0QmpubwFblquoaAMUflgOns6BAA="); background-position:70% top; background-size:220% auto; height:760px; left:0; min-width:0; top:0; width:100%; }
  .light-hero-veil { height:84%; left:0; top:22%; width:100%; }
  .figma-frame { height:auto; max-width:none; min-height:100%; }
  /* P0-4: anchor the copy to the hero's bottom edge instead of a fixed top — a fixed top:390px
     plus natural content height pushed the buttons 21px past the 760px section. */
  .light-hero-copy { bottom:24px; gap:12px; left:32px; margin-left:0; padding:0; position:absolute; top:auto; width:calc(100% - 64px); }
  /* Mobile type scale — hierarchy first:
     34 display / 26 heading / 16 body (hero paragraph AND the belief copy) / 14 caption+controls */
  .light-hero h1 { font-size:34px; letter-spacing:-.5px; line-height:1.1; }
  .light-hero-desc { width:100%; }
  .light-hero-desc .light-hero-kicker { font-size:16px; line-height:1.4; max-width:none; }
  .light-hero-desc p { font-size:16px; line-height:1.4; max-width:none; }
  .light-btn { font-size:14px; }
  .light-belief { height:820px; margin-top:0; }
  /* P0-2: this rule sets top/left but was missing position:absolute, so the copy sat at the top
     of the section underneath the cards. */
  /* Belief copy = body text on mobile: the same 16px / 1.4 as the hero paragraph ("The ability to learn…",
     .light-hero-desc p) — user 2026-09-07. Position and width unchanged. */
  .light-belief-copy { font-size:16px; left:32px; line-height:1.4; position:absolute; top:395px; width:calc(100% - 64px); }
  /* Cards spread with the viewport only up to 580px; past that both anchor to the centre so the pair
     keeps the 580px composition (p1 at 50%−245.58px, p2's right edge at 50%+278px) instead of
     drifting to opposite edges on wide phones / small tablets. */
  .card-wrap-p1 { height:214.196745px; left:max(calc(12% - 25.177301px), calc(50% - 245.58px)); top:160.803255px; width:210.354602px; }
  .card-wrap-p1 .polaroid-card { height:174px; width:168.348028px; }
  /* P0-2: right:calc(11% - 95.98px) is negative below ~873px viewport width — card bled 55px
     past the right edge at 375px. */
  .card-wrap-p2 { height:274.727235px; right:max(12px, calc(50% - 278px)); left:auto; top:100.272765px; width:325.959268px; }
  .card-wrap-p2 .polaroid-card { height:240px; width:298.867925px; }
  .light-approach { height:auto; margin-top:0; padding-top:20px; }
  /* P0-1: the legacy dark-main rule `.approach-stage { position:absolute; inset:0 }` also hits
     the light-main stage. Desktop is rescued by the ≥1024 sticky override; mobile had nothing,
     so the whole scene left the flow and collapsed the section to its 130px padding. */
  .light-approach .approach-stage { height:auto; inset:auto; position:static; }
  /* In flow (relative), a leftover left:32px shifts the box and widens the document — side
     spacing must come from margin instead. */
  .light-approach-heading { left:auto; margin:0 32px; max-width:none; padding:0; position:relative; top:auto; width:auto; }
  .light-approach h2 { font-size:26px; line-height:1.15; }
  .light-approach-heading .eyebrow { font-size:14px; letter-spacing:1.68px; line-height:1.4; }
  .eyebrow { font-size:14px; }
  .figma-frame { gap:32px; }
  .light-approach .figma-frame { padding-bottom:48px; }
  .light-approach-heading { order:0; }
  .stack { height:290px; margin:0 auto; position:relative; width:calc(100% - 48px); }
  .stack-a { order:1; }
  .light-inference-a { order:2; }
  .stack .card-wrap { height:100% !important; left:0 !important; top:0 !important; width:100% !important; }
  .stack .stack-card { height:100%; width:100%; }
  /* Mobile A loop: one card (stacking doubles up the box-shadows), cycling its background
     through the aligned frames like a flipbook — hard cuts, infinite loop. background-image is
     non-interpolable, so paired keyframe stops (24%/26%) pin each cut. */
  .stack .stack-card { transform:none; }
  .stack .card-wrap { display:none; }
  .stack .card-wrap-a1 { display:flex; }
  /* The a frames' subject sits small in the canvas center — zoom the shared crop so the early,
     tiny frames read clearly; frames stay aligned since size/position live outside the keyframes. */
  .card-wrap-a1 .stack-card { animation:stack-a-cycle 5.2s infinite; background-image:url("assets/figma-user/stack-a-1-mobile.jpg"); background-size:190%; }
  @keyframes stack-a-cycle {
    0%,24% { background-image:url("assets/figma-user/stack-a-1-mobile.jpg"); }
    26%,49% { background-image:url("assets/figma-user/stack-a-2-mobile.jpg"); }
    51%,74% { background-image:url("assets/figma-user/stack-a-3-mobile.jpg"); }
    76%,100% { background-image:url("assets/figma-user/stack-a-4-mobile.jpg"); }
  }
  .light-inference { height:auto; margin-left:0; padding:0 32px; width:100%; }
  .light-inference h3,.light-inference p { max-width:none; width:100%; }
  .light-inference h3 { font-size:26px; line-height:1.2; }
  .light-inference p { font-size:16px; line-height:1.5; }
  .light-join-card h2 { font-size:26px; line-height:1.2; }
  .light-join-card > p:not(.eyebrow) { font-size:16px; line-height:1.5; }
  .footer-brand { font-size:20px; }
  .footer-bottom { font-size:14px; }
  /* The desktop entrance offsets (±400px) are wider than the phone screen itself and widen the
     layout viewport before the reveal fires — shrink them to an on-screen drift. */
  .motion-ready .light-main .card-wrap-p1.motion-card { transform:translate(-60px,-40px) scale(1.05); }
  .motion-ready .light-main .card-wrap-p2.motion-card { transform:translate(60px,-40px) scale(1.05); }
  .light-join { margin-top:0; padding:70px 20px; }
  .light-join-card { padding:52px 24px; width:100%; }
  .light-join-card .join-actions { flex-direction:column; width:100%; }
  .light-join-card .button { width:100%; }
}

@media (min-width:768px) {
  .light-header { background:#f4f0ed; }
}

/* Desktop type scale (spec 2026-08-28) — five tiers: 96/86 display · 40/48 heading · 32/48 statement
   · 24/32 body · 14/22 caption. SIZES ONLY: typefaces, colours and weights are set once in the base
   rules above and shared with the mobile scale in the max-width block. */
@media (min-width:768px) {
  /* 13vh / 3.1vh caps only bite below ~740px tall so the whole copy block fits a short window. */
  .light-hero h1 { font-size:min(clamp(70.2px, calc(40.62px + 3.846vw), 107px), 13vh); line-height:.896; }
  /* vh caps only bite on short viewports (<~770px tall for the h2, <700px for the h3) so the pinned
     heading and the bottom-anchored inference copy never collide; 1440×900 is unaffected. */
  .light-approach h2 { font-size:min(clamp(43.1px, calc(28.31px + 1.923vw), 61.5px), 7.5vh); letter-spacing:-1.0451px; line-height:.964; }
  .light-inference h3 { font-size:min(clamp(25.5px, calc(18.15px + .962vw), 35px), 5vh); line-height:1.5; white-space:nowrap; }
  .light-join-card h2 { font-size:clamp(30.3px, calc(19.23px + 1.442vw), 44px); line-height:1.2; }
  .light-belief-copy { font-size:min(clamp(19.2px, calc(13.62px + .721vw), 26px), 3.7vh); line-height:1.5; width:min(69.03vw, 994px); }
  .light-hero-desc { gap:10px; width:min(62.78vw, 904px); }
  .light-hero-desc p { font-size:min(clamp(16.8px, calc(13.08px + .481vw), 21.5px), 3.1vh); line-height:1.5; }
  .light-hero-desc .light-hero-kicker { max-width:min(48vw, 691px); }
  .light-hero-desc p:not(.light-hero-kicker) { max-width:min(47.3vw, 681px); }
  .light-inference p { font-size:min(clamp(16.8px, calc(13.08px + .481vw), 21.5px), 3.1vh); line-height:1.5; }
  .footer-brand { font-size:clamp(13.62px, calc(9.564px + .531vw), 18.9px); gap:10.02px; line-height:.833; margin-bottom:3.66px; }
  .footer-brand-icon { height:18.64px; width:21.51px; }
  /* The divider lives on the full-width .footer-bottom (base rule), not on the 1072px-capped
     .footer-main, so it always runs edge to edge regardless of viewport width. */
  .footer-main { padding-top:70px; }
  .footer-main nav { padding-top:2px; }
  .footer-email { min-height:0; padding-top:0; }
  .footer-bottom-actions { gap:20px; }
  /* Eyebrow tracks the inference h3 (same clamp/5vh expression) at 0.53×, capped at the 14px Figma
     value: its uppercase, letter-spaced line is then never wider than "Learning at inference"
     (measured: 0.55 lands within 1px of equal). Spacing/leading are em-based so they scale with it
     (2.4px / 22px at 14px). */
  .light-approach-heading .eyebrow { font-size:min(14px, calc(.53 * min(clamp(25.5px, calc(18.15px + .962vw), 35px), 5vh))); letter-spacing:.1714em; line-height:1.5714; }
  .light-join-card .eyebrow { font-size:clamp(14.8px, calc(11.08px + .481vw), 19.5px); line-height:1.222; }
  .light-join-card > p:not(.eyebrow) { font-size:clamp(14.8px, calc(11.08px + .481vw), 19.5px); line-height:1.5; }
  .light-join-card { width:min(50vw, 720px); }
  .light-btn { font-size:clamp(14.8px, calc(11.08px + .481vw), 19.5px); line-height:1.333; }
  .light-join-card .button { font-size:16px; }
  .light-nav a { font-size:14px; line-height:22px; }
  .footer-main p { font-size:14px; line-height:22px; }
  .footer-email { font-size:14px; line-height:22px; }
  .footer-main nav a { font-size:14px; line-height:22px; }
  .footer-bottom { font-size:14px; line-height:22px; }
}

html[data-variant="dark"] { --paper:#000; --ink:#fff; --warm:#a89f92; --footer:#1a1a1a; color-scheme:dark; }
html[data-variant="dark"] body { background:#000; }
html[data-variant="dark"] .site-header { background:#fffefc; color:#111; }
html[data-variant="dark"] .hero { background:#000; }
html[data-variant="dark"] .hero-art { background-image:url("assets/figma-105/hero-cinematic-2k.jpg"); height:1362.71px; left:-377px; top:-234px; transform:rotate(179.33deg) scaleY(-1); width:2181.85px; }
html[data-variant="dark"] .hero-content { left:74px; top:360px; }
html[data-variant="dark"] .hero h1 { color:#fff; }
html[data-variant="dark"] .hero h1 span { color:#d3e1ff; }
html[data-variant="dark"] .hero-content > p { color:#fff; }
html[data-variant="dark"] .hero-actions .button-dark { background:#edf0f6; border-color:#fff; color:#5b85bb; }
html[data-variant="dark"] .hero-actions .button-blue { background:linear-gradient(#3e537c,#6d7d91); }
html[data-variant="dark"] .hero-actions .button-arrow-light { display:none; }
html[data-variant="dark"] .hero-actions .button-arrow-dark { display:block; }
html[data-variant="dark"] .vision { margin-top:0; }
html[data-variant="dark"] .vision-art img { visibility:visible; z-index:2; }
html[data-variant="dark"] .vision-art::before { background:url("assets/figma-105/a6e6403cdcf3577034010bb72a83e78fd7031292.png") center/cover; content:""; inset:0; position:absolute; z-index:1; }
html[data-variant="dark"] .vision-copy { background:linear-gradient(90deg,#000,rgb(0 0 0 / 0%)); }
html[data-variant="dark"] .approach { background:url("assets/figma-105/38f9a248bcf246c96716b924d685fecceddf42ca.png") center bottom/cover; height:846px; margin-top:2px; }
html[data-variant="dark"] .approach-card { background:linear-gradient(#f3f1ef,rgb(234 233 229 / 90%)); height:820px; left:33px; top:13px; width:calc(100% - 64px); }
html[data-variant="dark"] .approach-heading { top:78.25px; }
html[data-variant="dark"] .inference-copy { top:572px; }
html[data-variant="dark"] .device-media { top:101.48px; }
html[data-variant="dark"] .join { background:#000; }
html[data-variant="dark"] .join { margin-top:-7px; }
html[data-variant="dark"] .join-backdrop { background-image:linear-gradient(180deg,rgb(255 255 255 / 0%),#f8f6f2),url("assets/figma-105/e86e3c68173afa66a54ad0875bd7020cae6edbf4.png"); }

:focus-visible { outline:2px solid #2766df; outline-offset:3px; }

@media (min-width:1441px) {
  .hero-art { left:-6px; width:calc(100vw + 12px); }
  html[data-variant="dark"] .hero-art { left:-430px; width:calc(100vw + 860px); }
}

@media (min-width:768px) and (max-width:1199px) {
  /* Footer keeps the header's 72px band at these widths (rule above); nothing to narrow. */
}

@media (max-width:767.98px) {
  .site-header { padding:0 16px; }
  .brand { height:34px; transform:scale(.82); transform-origin:left center; width:222px; }
  .desktop-nav { display:none; }
  .menu-btn { display:block; margin-left:auto; }
  .mobile-menu:not([hidden]) { background:#f8f6f2; box-shadow:0 12px 18px rgb(0 0 0 / 10%); display:flex; flex-direction:column; left:0; padding:6px 20px 16px; position:absolute; right:0; top:64px; }
  html[data-variant="dark"] .mobile-menu:not([hidden]) { background:#20242a; color:#fff; }
  .mobile-menu a { border-bottom:1px solid rgb(30 30 30 / 13%); font-size:15px; padding:14px 0; text-decoration:none; }
  .hero { height:748px; }
  .hero-art { background-position:center top; height:748px; left:-390px; top:0; transform:none; width:1180px; }
  html[data-variant="dark"] .hero-art { background-position:center; height:748px; left:calc(50% - 600px); top:0; transform:rotate(179.33deg) scaleY(-1); width:1200px; }
  .hero::after { height:180px; }
  .hero-content,html[data-variant="dark"] .hero-content { left:32px; max-width:calc(100% - 64px); right:32px; top:230px; }
  .hero h1 { font-size:48px; letter-spacing:-.5px; line-height:48px; white-space:normal; }
  .hero-content > p { font-size:16px; line-height:23px; margin-top:30px; }
  .hero-actions { flex-direction:row; margin-top:30px; }
  .button { font-size:14px; padding:0 18px; }
  .hero-actions .button-dark { min-width:174px; }
  .hero-actions .button-blue { min-width:92px; }
  .vision,html[data-variant="dark"] .vision { display:block; height:auto; margin:0 16px; top:0; width:auto; }
  .vision-art { height:190px; width:100%; }
  .vision-art img { height:100%; inset:0; object-fit:cover; object-position:center; width:100%; }
  html[data-variant="dark"] .vision-art { aspect-ratio:1; height:auto; width:min(277px,100%); }
  html[data-variant="dark"] .vision-art img { height:166.98%; inset:auto; left:-92.94%; max-width:none; object-fit:fill; top:-.68%; width:193.05%; }
  .vision-copy { font-size:20px; height:auto; line-height:30px; min-height:270px; padding:38px 28px; width:100%; }
  .vision-copy p { width:auto; }
  .approach,html[data-variant="dark"] .approach { height:850px; }
  .approach-card,html[data-variant="dark"] .approach-card { height:818px; left:16px; top:16px; width:calc(100% - 32px); }
  .approach-heading,html[data-variant="dark"] .approach-heading { left:32px; top:52px; }
  .approach h2 { font-size:38px; line-height:42px; white-space:normal; }
  .device-media,html[data-variant="dark"] .device-media { height:365px; left:24px; top:220px; width:calc(100% - 48px); }
  .inference-copy,html[data-variant="dark"] .inference-copy { bottom:62px; height:150px; left:42px; top:auto; width:calc(100% - 84px); }
  .inference-copy h3 { font-size:30px; line-height:32px; }
  .inference-copy p { font-size:17px; line-height:23px; max-width:none; top:66px; width:100%; }
  .join { height:590px; padding:70px 20px; }
  .join-card { height:auto; padding:52px 24px; width:100%; }
  .join-actions { flex-direction:column; width:100%; }
  .join-actions .button { width:100%; }
  .role-tooltip-wrap { width:100%; }
  .role-tooltip { bottom:55px; max-width:100%; white-space:normal; width:max-content; }
  footer { height:auto; }
  .footer-main { gap:42px; grid-template-columns:1fr; height:auto; padding:58px 28px; }
  .footer-bottom { align-items:flex-start; flex-direction:column; gap:18px; height:auto; padding:24px 28px; }
  .footer-bottom-actions { align-items:flex-start; flex-direction:column; gap:18px; width:100%; }
  .footer-legal-links { gap:10px 18px; }
}

@media (min-width:480px) and (max-width:767px) {
  .hero-actions .button { font-size:15px; padding:0 27px; }
  .hero-actions .button-dark { min-width:204px; width:204px; }
  .hero-actions .button-blue { min-width:109px; width:109px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .button,.device-poster { transition:none; }
  .device-media video { display:none; }
  .device-poster { opacity:1 !important; }
  .motion-ready .light-main .motion-reveal,
  .motion-ready .light-main .motion-image,
  .motion-ready .light-main .motion-line,
  .motion-ready .light-main .motion-card { opacity:1; transform:none; transition:none; }
  .kinetic-words .kinetic-word { animation:none; opacity:1; transform:none; }
}

/* Reduced motion on desktop: the scroll-scrub JS is disabled, so the scene elements that it
   normally reveals (opacity:0 base state) must be shown statically — heading + final A card +
   A copy, in a single static panel. */
@media (prefers-reduced-motion:reduce) and (min-width:768px) {
  .light-approach { height:auto; }
  .light-approach .approach-stage { height:100vh; overflow:visible; position:relative; }
  .approach-stage .card-wrap, .approach-stage .light-inference { opacity:1; }
  .stack .card-wrap-a1,.stack .card-wrap-a2,.stack .card-wrap-a3 { display:none; }
  /* Higher-specificity entrance offsets (.card-wrap-p*.motion-card) would beat the generic
     .motion-card reset above; repeat the reset at matching specificity. */
  .motion-ready .light-main .card-wrap-p1.motion-card,
  .motion-ready .light-main .card-wrap-p2.motion-card { transform:none; }
}

/* Reduced motion on mobile: stop the flipbook loop on the final, complete frame. */
@media (prefers-reduced-motion:reduce) and (max-width:767px) {
  .card-wrap-a1 .stack-card { animation:none; background-image:url("assets/figma-user/stack-a-4-mobile.jpg"); }
}

/* ===== Careers pages (careers/) — Figma「官网 1440 · 代码回同步 0831」nodes 1896:195 (L2 Open roles),
   1887:195 / 1899:195 / 1899:363 (L3 详情). Same header/footer/tokens as the home page; Chinese
   falls back per glyph to the system CJK faces (Songti / PingFang) so no multi-MB CJK woff2 is
   shipped. Type scale is the user-tuned one from Figma: 64/104 title · 32/48 headings · 28/48 fact
   values · 16/24 body · 14/22 eyebrows. */
.careers-page { --careers-serif:"Gentium Plus","Songti SC","Noto Serif CJK SC","Source Han Serif SC","Noto Serif SC",Georgia,serif; --careers-sans:"Roboto","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC","Inter",sans-serif; background:#f4f0ed; color:#302925; font-family:var(--careers-sans); padding-top:64px; }
.careers-page .light-header { background:#f4f0ed; }
.careers-main { position:relative; }
.careers-band { padding:0 max(132px, calc(50% - 588px)); } /* 132px inset on Figma's 1440px careers frames; content stays capped at 1176px. */
.careers-title { padding-bottom:72px; padding-top:96px; } /* longhands: the horizontal inset comes from .careers-band */
.careers-back { align-items:center; background:#fffaf5; border:1px solid rgb(0 0 0 / 29%); border-radius:5px; box-sizing:border-box; color:#083733; cursor:pointer; display:flex; font-family:"Roboto","Inter",sans-serif; font-size:20px; height:44px; justify-content:center; left:max(72px, calc(50% - 728px)); line-height:1; position:absolute; text-decoration:none; top:32px; width:44px; }
.careers-back:focus-visible { outline:2px solid #008f7f; outline-offset:3px; }
.careers-eyebrow { color:#5c8982; font-family:"Roboto","Inter",sans-serif; font-size:14px; font-weight:600; letter-spacing:2.4px; line-height:22px; margin:0; text-transform:uppercase; }
.careers-title h1 { color:#382d22; font-family:var(--careers-serif); font-size:clamp(40px, 4.444vw, 64px); font-weight:400; letter-spacing:-1.0451px; line-height:1.625; margin:0; } /* 64/104 at 1440, scales down with the window */
.careers-intro { color:#2e2b27; font-size:18px; font-weight:300; line-height:27px; margin:0; max-width:720px; }
.careers-item { color:#302925; display:flex; font-size:16px; font-weight:300; gap:12px; line-height:24px; }
.careers-item::before { color:#008f7f; content:"—"; flex:none; font-family:"Roboto","Inter",sans-serif; }
/* L2 — roles list */
.roles-list { border-top:.5px solid #666460; list-style:none; margin:0; padding:0; }
.role-row { align-items:start; border-bottom:.5px solid #666460; display:grid; gap:min(48px, 3.333vw); grid-template-columns:min(400px, 27.778vw) minmax(0,1fr) auto; padding:40px 0; } /* 400 / 48 at 1440 */
.role-name { color:#1a1a1a; font-family:var(--careers-serif); font-size:clamp(28px, 2.222vw, 32px); font-weight:400; line-height:1.5; margin:0; }
.role-meta,.fact-label { color:#776f63; font-family:"Roboto","Inter",sans-serif; font-size:14px; font-weight:400; letter-spacing:1.68px; line-height:22px; margin:0; text-transform:uppercase; } /* role meta stays regular (user 2026-09-04) */
.fact-label { font-weight:600; } /* the LOCATION / TYPE / COMPENSATION row on detail pages is bold (user 2026-09-04) */
.role-meta { margin-top:6px; }
.role-points { display:grid; gap:12px; list-style:none; margin:0; padding:12px 0 0; }
.role-soon { color:#776f63; font-size:16px; font-weight:300; line-height:24px; margin:12px 0 0; }
.role-action { padding-top:4px; }
.btn-outline { align-items:center; background:#fffaf5; border:1px solid rgb(0 0 0 / 29%); border-radius:5px; box-sizing:border-box; color:#373737; display:inline-flex; font-size:16px; font-weight:400; gap:8px; height:40px; line-height:24px; padding:0 24px; text-decoration:none; white-space:nowrap; }
/* L3 — facts + sections */
.facts { border-bottom:.5px solid #666460; border-top:.5px solid #666460; display:grid; gap:min(48px, 3.333vw); grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); list-style:none; margin:0; padding:40px 0; } /* 3 across at 1440, 2 then 1 as the band narrows */
.fact-value { color:#1a1a1a; font-family:var(--careers-serif); font-size:clamp(24px, 1.944vw, 28px); font-weight:400; line-height:1.7143; margin:0; }
.careers-sections { display:grid; gap:9px; padding-bottom:36px; padding-top:0; }
/* The rule under the title used to belong to the facts row (removed 2026-09-07). It sits on the first section so it
   spans the content band, not the padded full width. */
.careers-section:first-child { border-top:.5px solid #666460; padding-top:40px; }
.careers-section { display:grid; gap:min(48px, 3.333vw); grid-template-columns:min(400px, 27.778vw) minmax(0,1fr); }
.careers-section h2 { color:#1a1a1a; font-family:var(--careers-serif); font-size:clamp(28px, 2.222vw, 32px); font-weight:400; line-height:1.5; margin:-2px 0 0; }
.careers-section ul { display:grid; gap:12px; list-style:none; margin:0; padding:32px 0 0; }
/* apply card (shared by L2 自荐 and L3 简历投递) */
.apply-band { padding-bottom:120px; }
.apply-band.apply-band-top { padding-top:72px; }
.apply-card { align-items:center; background:linear-gradient(to bottom,rgb(228 219 218 / 30%),rgb(240 236 233 / 10%)); border:.5px solid rgb(102 100 96 / 51%); display:flex; flex-direction:column; gap:15px; padding:56px 48px; text-align:center; }
.apply-card .careers-eyebrow { color:#719791; font-family:"Roboto","Inter",sans-serif; font-size:14px; font-weight:600; letter-spacing:1.68px; line-height:22px; }
.apply-card h2 { color:#1a1a1a; font-family:var(--careers-serif); font-size:clamp(28px, 2.222vw, 32px); font-weight:400; line-height:1.5; margin:0; } /* same size rule as .role-name (user 2026-09-07) */
.apply-card p { color:#2e2b27; font-family:"Noto Sans SC",var(--careers-sans); font-size:18px; font-weight:300; line-height:27px; margin:0; max-width:600px; }
.apply-actions { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; padding-top:15px; }
.btn-primary { align-items:center; border-radius:5px; box-sizing:border-box; color:#fff; display:inline-flex; font-family:"Noto Sans SC",var(--careers-sans); font-size:clamp(14px, 1.111vw, 16px); font-weight:400; gap:8px; height:clamp(40px, 3.125vw, 45px); line-height:24px; padding:0 clamp(24px, 2.083vw, 30px); text-decoration:none; white-space:nowrap; } /* 16px text / 45px box at 1440, scales with the window (user 2026-09-04) */
.btn-primary { background:#33a190; border:1px solid #aaddd4; }
.applicant-privacy-note { color:#59534d; font-size:16px; line-height:1.6; margin:0 auto; max-width:720px; padding:0; text-align:center; }
.applicant-privacy-note a { color:#006f63; text-underline-offset:3px; }
/* Careers text appears once as it enters view; no JS or reduced-motion fallback ever hides content. */
@media (prefers-reduced-motion:no-preference) {
  .careers-motion-ready .careers-title > *,.careers-motion-ready .role-row,.careers-motion-ready .facts > li,.careers-motion-ready .careers-section,.careers-motion-ready .apply-card { opacity:0; transform:translateY(7px); transition:opacity .75s cubic-bezier(.22,1,.36,1) var(--careers-reveal-delay,0ms),transform .9s cubic-bezier(.22,1,.36,1) var(--careers-reveal-delay,0ms); }
  .careers-motion-ready .careers-motion-visible,.careers-motion-ready .facts > li.careers-motion-visible { opacity:1; transform:none; }
}
@media (min-width:768px) {
  /* Careers body copy = the site's body size, i.e. the same responsive expression as the hero paragraph
     ("The ability to learn…", .light-hero-desc p) — user 2026-09-07. Mobile follows the same paragraph's
     16px / 1.4 in the mobile block below. */
  .careers-item,.role-soon,.careers-intro,.apply-card p { font-size:min(clamp(16.8px, calc(13.08px + .481vw), 21.5px), 3.1vh); line-height:1.5; }
}
@media (min-width:768px) and (max-width:1199px) {
  /* Too narrow for name | highlights | button side by side: highlights drop under the name, button keeps the right edge. */
  .role-row { gap:0 min(48px, 3.333vw); grid-template-areas:"heading action" "points action"; grid-template-columns:minmax(0,1fr) auto; }
  .role-heading { grid-area:heading; }
  .role-points,.role-soon { grid-area:points; }
  .role-points { padding-top:20px; }
  .role-action { grid-area:action; }
}
@media (max-width:767.98px) {
  .careers-band { padding:0 36px; } /* mobile header inset (16px) + 20px */
  .careers-back { font-size:16px; height:36px; left:16px; top:0; width:36px; }
  /* Mobile type scale: body copy (items, intro, apply note) = the hero paragraph's mobile 16px / 1.4
     (user 2026-09-07, replacing the 13/20 · 14/21 scale of 2026-09-04); title 32/40 · headings 22/30 ·
     eyebrows and meta 11/16. The title band starts 16px below the 36px back button. */
  .careers-title { padding-bottom:24px; padding-top:52px; }
  .careers-title h1 { font-size:32px; letter-spacing:-.5px; line-height:40px; margin-top:8px; }
  .careers-intro { font-size:16px; line-height:1.4; margin-top:12px; }
  .careers-eyebrow { font-size:11px; letter-spacing:1.8px; line-height:16px; }
  .role-meta,.fact-label { font-size:11px; letter-spacing:1.2px; line-height:16px; }
  .role-meta { margin-top:4px; }
  .careers-item,.role-soon { font-size:16px; gap:8px; line-height:1.4; }
  .role-soon { margin-top:8px; }
  .role-row,.careers-section { gap:12px; grid-template-columns:minmax(0,1fr); }
  .role-row { padding:28px 0; }
  .role-name { font-size:22px; line-height:30px; }
  .role-points { gap:8px; }
  .facts { gap:16px; grid-template-columns:minmax(0,1fr); padding:24px 0; }
  .fact-value { font-size:20px; line-height:28px; }
  .careers-sections { gap:32px; padding-bottom:24px; padding-top:0; }
  .careers-section:first-child { padding-top:24px; }
  .careers-section h2 { font-size:22px; line-height:30px; }
  .careers-section ul,.role-points { padding-top:0; }
  .careers-section ul { gap:8px; }
  .role-action { padding-top:0; width:100%; }
  .btn-outline,.btn-primary { justify-content:center; width:100%; }
  .btn-outline { font-size:14px; height:36px; line-height:20px; }
  .btn-primary { font-size:14px; height:40px; line-height:20px; padding:0 24px; }
  .apply-band { padding-bottom:48px; }
  .apply-band.apply-band-top { padding-top:32px; }
  .apply-card { gap:10px; padding:32px 20px; }
  .apply-card .careers-eyebrow { font-size:11px; letter-spacing:1.2px; line-height:16px; }
  .apply-card h2 { font-size:22px; line-height:30px; }
  .apply-card p { font-size:16px; line-height:1.4; }
  .apply-actions { flex-direction:column; gap:10px; padding-top:10px; width:100%; }
  .applicant-privacy-note { padding:0; }
}

/* English legal and privacy pages. These are intentionally quiet, reading-first documents that share the
   public site's brand, type, color and footer rather than introducing another visual system. */
.legal-page { background:#f4f0ed; color:#302925; font-family:"Roboto","Inter",sans-serif; padding-top:64px; }
.legal-page .light-header { background:#f4f0ed; }
.legal-main { min-height:60vh; }
.legal-shell { margin:0 auto; max-width:980px; padding:96px 48px 120px; }
.legal-kicker { color:#5c8982; font-size:13px; font-weight:600; letter-spacing:2.2px; margin:0 0 18px; text-transform:uppercase; }
.legal-hero { border-bottom:1px solid rgb(102 100 96 / 45%); margin-bottom:48px; padding-bottom:48px; }
.legal-hero h1 { color:#382d22; font-family:"Gentium Plus",Georgia,serif; font-size:clamp(44px,6vw,72px); font-weight:400; letter-spacing:-1px; line-height:1.05; margin:0 0 20px; }
.legal-meta,.legal-lead { color:#5d5750; font-size:17px; line-height:1.65; margin:0; max-width:760px; }
.legal-meta { font-size:16px; margin-top:18px; }
.legal-content { display:grid; gap:44px; max-width:75ch; }
.legal-content section { scroll-margin-top:88px; }
.legal-content h2 { color:#1a1a1a; font-family:"Gentium Plus",Georgia,serif; font-size:30px; font-weight:400; line-height:1.25; margin:0 0 14px; }
.legal-content h3 { color:#2c2824; font-size:17px; line-height:1.4; margin:24px 0 8px; }
.legal-content p,.legal-content li,.legal-address { font-size:16px; font-style:normal; font-weight:300; line-height:1.72; }
.legal-content p { margin:0 0 14px; }
.legal-content ul { display:grid; gap:8px; margin:12px 0 0; padding-left:22px; }
.legal-content a { color:#006f63; text-underline-offset:3px; }
.legal-callout { background:#e8e2dc; border-left:3px solid #33a190; padding:20px 22px; }
.legal-callout p:last-child,.legal-content section > :last-child { margin-bottom:0; }
.legal-page footer { height:auto; }
.legal-page .footer-main { min-height:316px; }
.light-join-card > p.join-privacy-note { color:#5d5750; font-size:16px; line-height:1.5; margin-top:14px; max-width:520px; }
.light-join-card > p.join-privacy-note a { color:#006f63; text-underline-offset:3px; }
@media (max-width:767.98px) {
  .legal-shell { padding:64px 24px 72px; }
  .legal-hero { margin-bottom:36px; padding-bottom:36px; }
  .legal-hero h1 { font-size:42px; }
  .legal-lead { font-size:16px; }
  .legal-content { gap:36px; }
  .legal-content h2 { font-size:27px; }
  .legal-content p,.legal-content li,.legal-address { font-size:16px; }
}

/* ≥1.5dppx desktop screens get the full 2752w encodes (the 1920w set would be upscaled ~1.6× on a
   2× 1440px display and soften the line work). Mirrors the preload media queries in <head>. */
@media (min-width:768px) and (min-resolution:1.5dppx) {
  .light-hero-art { background-image:image-set(url("assets/figma-b-test/hero-art-2752.avif") type("image/avif"),url("assets/figma-b-test/hero-art-2752.webp") type("image/webp"),url("assets/figma-b-test/hero-art.jpg") type("image/jpeg")),url("data:image/webp;base64,UklGRvwAAABXRUJQVlA4IPAAAABwBgCdASowAB4APrVMoUsnJCMhqrgMAOAWiWkACBvOp/e1Nm/n93kcWKdChHK1eNTztbqArG1H+hUpTAAA/vmZuGQQ9z1X4UxxDsB5RktwxarMDF0hUwESJslp8dG5foWHAxH1g6HA8S5BitrBsDSnGP0TwsDCjKvJxj8QPh4yhTCp50Ehb3kMxZoPmeN3BGG0qwPvkjzPuY7i1GzKJYdfXcAet6usT4qMrp9leZ7Y57oXWqWssuUjfpRqOyQE16emBrlfIVP5KcrDJ9aNTkm2BvoPLJuKNtltmhRi0QmpubwFblquoaAMUflgOns6BAA="); }
}
/* Desktop belief card placement — Figma tFncbEkPEyRqS4h7Su8ODE node 1:218. Figma's `rotation` is counter-clockwise-
   positive and CSS rotate() is clockwise-positive, so the CSS angle is the NEGATED Figma value: p1 -3.27 ->
   rotate(3.27deg), p2 +7.02 -> rotate(-7.02deg). The base rules above hold the mobile geometry/angles. */
@media (min-width:768px) {
  .card-wrap-p1 { height:min(24.32vw,38.911vh); left:calc(50% - min(29.243vw,46.788vh)); top:calc(50% - min(15.313vw,24.501vh)); width:min(23.613vw,37.782vh); }
  .card-wrap-p1 .polaroid-card { transform:rotate(3.27deg); }
  .card-wrap-p2 { left:calc(50% - min(7.431vw,11.889vh)); top:calc(50% - min(20.694vw,33.111vh)); }
  .card-wrap-p2 .polaroid-card { transform:rotate(-7.02deg); }
}