/* Additions to the boss's pages (lp-v2): language switch, app-screenshot slots, talent FAQ, reduced motion.
   Loaded last; the boss's own CSS files are untouched. */

/* 1 · four languages, the current one marked by a short slanted blade (the site's switch) */
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }

/* 2 · real app screenshots: app-shots/<page>-<panel>.png covers its panel; missing files remove themselves */
.phone .scr { overflow: hidden; }
.phone .scr .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; z-index: 5; display: none; }
.phone .scr .shot.ok { display: block; }

/* 3 · talent FAQ, in the company page's FAQ style */
.lp-faq .faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; }
.lp-faq .faq-list { border-top: 2px solid currentColor; }
.lp-faq details { border-bottom: 1px solid rgba(0, 92, 148, .18); }
.lp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-weight: 700; font-size: 17.5px; align-items: center; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; font-size: 26px; font-weight: 300; color: #19AEFF; transition: transform .3s; flex: none; }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq details p { padding: 0 40px 24px 0; opacity: .8; font-size: 15.5px; }
@media (max-width: 1100px) { .lp-faq .faq { grid-template-columns: 1fr; gap: 40px; } }

/* 4 · reduced motion: the floating cards, pulses and marquees stop */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* the phone's side buttons stand ~1% proud of the body; on a phone-width screen that is 2px past the edge — clip, don't scroll */
html, body { overflow-x: clip; }
/* step numbers stay on one line in every language ("LANGKAH 01" is longer than "STEP 01"): the number column takes the width it needs */
.steps button .num { white-space: nowrap; }
@media (min-width: 861px) { html body .steps button { grid-template-columns: max-content 1fr auto; column-gap: 18px; } }

/* ───────── 2026-09-30 review: language dropdown ───────── */
.langdd { position: relative; margin-left: 4px; align-self: center; }
.langdd summary { list-style: none; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px 0 9px; border: 1px solid rgba(255,255,255,.28);
  border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: inherit; transition: border-color .2s, background-color .2s; user-select: none; }
.langdd summary::-webkit-details-marker { display: none; }
.langdd summary:hover, .langdd[open] summary { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); }
.langdd summary:focus-visible { outline: 2px solid #19AEFF; outline-offset: 2px; }
.langdd summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; opacity: .85; }
.langdd .chev { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg);
  transition: transform .25s cubic-bezier(.2,.8,.2,1); opacity: .75; }
.langdd[open] .chev { transform: translateY(1px) rotate(-135deg); }
.langmenu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 196px; padding: 6px; background: #fff; color: #0B2A40; border-radius: 10px;
  box-shadow: 0 18px 40px -12px rgba(0,30,55,.35), 0 0 0 1px rgba(0,40,70,.08); z-index: 80;
  opacity: 0; transform: translateY(-4px); transition: opacity .18s, transform .22s cubic-bezier(.2,.8,.2,1); }
.langdd[open] .langmenu { opacity: 1; transform: none; }
.langdd.opening .langmenu { opacity: 0; transform: translateY(-4px); }
.langmenu a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 6px; font-size: 14px; font-weight: 500;
  color: inherit; text-decoration: none; transition: background-color .15s; }
.langmenu a small { font-size: 11.5px; letter-spacing: .06em; color: #6B7C8A; font-weight: 600; }
.langmenu a:hover, .langmenu a:focus-visible { background: #EEF4F8; outline: none; }
.langmenu a[aria-current] { color: #005C94; font-weight: 700; }
.langmenu a[aria-current] small { color: #005C94; }
.langmenu a[aria-current]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #19AEFF; margin-right: -6px; order: -1; }
.langmenu a[aria-current] span { margin-right: auto; margin-left: 10px; }

/* ───────── hero: the whole first screen, headline to trust row, fits one viewport ───────── */
@media (min-width: 861px) {
  html body .hero { --col: calc(42vw - max(var(--pad), (100vw - var(--hwrap)) / 2 + var(--pad)) - 48px); }   /* left of the photo's diagonal at its lowest point */
  html body .hero .wrap { padding-top: clamp(28px, 5.5svh, 80px); padding-bottom: clamp(28px, 5svh, 64px); }
  html body .hero h1 { font-size: clamp(48px, min(7.4vw, 10.2svh), 136px); }
  html body .hero .jtag, html body .hero .hero-sub { margin-top: clamp(10px, 2.2svh, 26px); }
  html body .hero .hero-sub { font-size: clamp(24px, min(2.9vw, 4.6svh), 46px); }
  html body .hero p.lead { margin-top: clamp(10px, 1.8svh, 20px); max-width: min(520px, var(--col)) !important; }
  html body .hero .hero-ctas { margin-top: clamp(18px, 3.4svh, 40px); }
  html body .hero .hero-trust { margin-top: clamp(18px, 4svh, 64px); max-width: min(600px, var(--col)) !important; }
  html body .hero .hero-trust span { white-space: normal; }
}
@media (min-width: 861px) and (max-width: 1100px) { html body .hero { --col: calc(48vw - var(--pad) - 40px); } }

/* ───────── restrained motion ───────── */
@keyframes lpDrift { from { translate: 0 0; } to { translate: 0 -5px; } }
.hero-float { animation: lpDrift 5.5s ease-in-out infinite alternate; }
.hero-float.hc-score, .hero-float.hc-short { animation-delay: -2.7s; }
.btn .arr { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.btn:hover .arr { transform: translateX(3px); }
.nav > a:not(.btn) { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s cubic-bezier(.2,.8,.2,1); padding-bottom: 2px; }
.nav > a:not(.btn):hover { background-size: 100% 1px; }

/* ───────── phone: behave like a real iPhone — status bar never moves, only the app content changes ───────── */
html body .phone .scr:has(.real) { padding: 0; transform: none; transition: opacity .35s; }
.real .rs-pad, .real .rs-call { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.phone .scr:has(.real):not(.on) .rs-pad { transform: translateY(10px); }
.phone .screen { background: #F6F7F9; }
@media (prefers-reduced-motion: reduce) { .hero-float { animation: none; } .phone .scr:has(.real):not(.on) .rs-pad { transform: none; } }
@media (min-width: 861px) and (max-height: 820px) {   /* short laptop screens: tighten the vertical rhythm, not the width */
  html body .hero .wrap { padding-top: 3.5svh; padding-bottom: 3.5svh; }
  html body .hero h1 { font-size: clamp(48px, min(7.4vw, 9.6svh), 136px); }
  html body .hero .hero-ctas { margin-top: 2.8svh; }
  html body .hero .hero-trust { margin-top: 2svh; }
  html body .hero .hero-trust div { padding-top: 12px; }
}

/* wide screens: the hero photo bleeds to the right edge, so the text column must not sit in a centred 1440 box —
   hero + header share a wider 1680 box, which pulls the headline (and the logo above it) toward the left */
:root { --hwrap: 1680px; }
html body .hero .wrap, html body .hdr .wrap, html body .role-strip .wrap { max-width: var(--hwrap); }   /* role strip (company): lines up with the hero */
@media (min-width: 861px) and (max-height: 900px) {                /* JA carries an extra Mincho line: give it the room back from the headline */
  html[lang="ja"] body .hero h1 { font-size: clamp(46px, min(7vw, 8.4svh), 120px); }
  html[lang="ja"] body .hero .jtag { font-size: clamp(18px, 3.4svh, 30px); }
  html[lang="ja"] body .hero .hero-sub { font-size: clamp(18px, 3.4svh, 28px); }
  html[lang="ja"] body .hero p.lead { line-height: 1.6; }
}
/* the phone always fits under the sticky header with breathing room: width follows the viewport height via the device's true ratio */
@media (min-width: 861px) { html body .how .phone { width: min(380px, calc((100svh - 73px - 64px) * 78 / 163.4)); margin-inline: auto; } }
@media (min-width: 861px) and (max-width: 1180px) {   /* tablets / small laptops: the header must fit without pushing the CTA off-screen */
  html body .hdr .wrap { gap: 18px; }
  html body .hdr .nav { gap: 16px; }
  html body .hdr .nav > a { font-size: 13.5px; }
  html body .hdr .btn { padding-left: 14px; padding-right: 14px; font-size: 13.5px; }
}
@media (min-width: 861px) and (max-width: 1023px) { html body .hdr .nav > a[href^="#"] { display: none; } }
/* small eyebrow labels may wrap on phones rather than be cut (long BM / JA labels) */
@media (max-width: 860px) { html body .eyebrow { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: 100% !important; } }

/* FAQ: answers open and close with a short height transition (Chromium; other browsers open instantly, as before) */
:root { interpolate-size: allow-keywords; }
details::details-content { block-size: 0; overflow: hidden; transition: block-size .38s cubic-bezier(.2,.8,.2,1), content-visibility .38s allow-discrete; }
details[open]::details-content { block-size: auto; }
details.langdd::details-content { block-size: auto; overflow: visible; transition: none; }   /* the language menu is positioned, not collapsed */
@media (prefers-reduced-motion: reduce) { details::details-content { transition: none; } }

/* ───────── 2026-10-01 · boss v11 phone layout ───────── */
/* the globe sits in the header bar on phones too (boss's layout): pushed right, next to the burger; menu pinned under the bar */
@media (max-width: 860px) {
  html body .hdr .wrap > .langdd { margin-left: auto; }
  html body .hdr .langdd summary { height: 40px; }
  html body .hdr .langmenu { position: fixed; right: 12px; top: calc(73px + 8px); }   /* just under the 73px bar (the boss had 66px, which tucks it into the bar) */
}

/* "How it works" on phones: the boss's accordion opens a large preview under the tapped step.
   Here that preview is the same iPhone 18 Pro Max as on desktop (true 78 : 163.4 body, 15.4 pt bezel, Dynamic Island),
   and the real app screen inside it is laid out against the preview's own screen (size container), not the window. */
@media (max-width: 860px) {
  html body .steps button.on .step-shot {
    width: min(236px, 64vw); height: auto; aspect-ratio: 78 / 163.4; padding: 0; overflow: visible; box-sizing: border-box;
    border-radius: 16.35% / 7.81%; border: 2.5px solid transparent;
    background: linear-gradient(#08090A, #08090A) padding-box,
                linear-gradient(150deg, #F2F4F6 0%, #B9C1C7 28%, #E6EAED 52%, #A3ACB3 78%, #DDE2E6 100%) border-box;
    box-shadow: 0 34px 44px -26px rgba(0, 30, 55, .38);
  }
  html body .steps button.on .step-shot-in {
    position: absolute; top: calc(1.56% - 2.5px); bottom: calc(1.56% - 2.5px); left: calc(3.27% - 2.5px); right: calc(3.27% - 2.5px);
    width: auto; height: auto; border-radius: 14.09% / 6.49%; container-type: size; background: #F6F7F9;
  }
  html body .steps button.on .step-shot::before {            /* Dynamic Island */
    content: ""; position: absolute; z-index: 3; left: 50%; translate: -50% 0; top: 2.68%; width: 17.5%; aspect-ratio: 81 / 36; border-radius: 999px; background: #000;
  }
  html body .steps button.on .step-shot::after {             /* side buttons on the aluminium band */
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -1.6%; right: -1.6%; pointer-events: none; border-radius: 2px;
    background: linear-gradient(#B7C0C6, #B7C0C6) left 0 top 17.6% / 1.6% 3.6% no-repeat, linear-gradient(#B7C0C6, #B7C0C6) left 0 top 24.4% / 1.6% 6.4% no-repeat,
                linear-gradient(#B7C0C6, #B7C0C6) left 0 top 32.4% / 1.6% 6.4% no-repeat, linear-gradient(#B7C0C6, #B7C0C6) right 0 top 27% / 1.6% 10% no-repeat;
  }
  html body .step-shot .scr.mini:has(.real) { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; padding: 0; }
}
@media (max-width: 860px) {   /* beats the boss's `.steps button.on .step-shot .scr.mini` scale(.786) — the real screen fills the preview 1 : 1 */
  html body .steps button.on .step-shot .scr.mini:has(.real) { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; padding: 0; }
}

/* the boss's mock screen under each real app screen is never visible — don't render it (also skips its photo download) */
.scr:has(> .real) > :not(.real) { display: none !important; }

/* ───────── 2026-10-01 · legibility on blue (all values are the boss's own tokens) ─────────
   katana-ds.css remapped the old black theme to blue, but some labels kept the black theme's #8F8D88 grey, the
   PRO card kept the white-card label blue, and the dark pipeline node kept blue-on-blue — 1.0–2.8 : 1, below WCAG AA.
   Secondary text on blue is --on-blue (5.5 : 1), as everywhere else in his system. */
.final-cta p,
.plan.pro .cr small, .plan.pro .cr b em,
.sl .hd span, .price-vis .from, .proc span, .pnode.dk .k span, .mside > div,
.cpm-copy .mono, .pv-int .q small, .pv-score .mono, .studio .top span, .dash .ring small,
.bn.feat p { color: var(--on-blue) !important; }
.cpm-copy .on .mono { color: var(--edge) !important; }   /* the active CUT / PROVE / MATCH keeps its accent */
.pnode.dk .k b { color: #fff; }                          /* "LIVE" was blue on blue (1.0 : 1) */
/* phone step labels: --edge is "accents only, never text" (his token note) — 2.46 : 1 on white; the step number reads in --blue */
@media (max-width: 860px) { html body .steps button .num { color: var(--blue) !important; } }

/* skip link: invisible until reached with Tab */
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; background: #fff; color: var(--blue); font-weight: 700; border-radius: 6px;
  box-shadow: 0 8px 24px -8px rgba(0,30,55,.4); transition: top .2s; }
.skip:focus { top: 12px; outline: 2px solid var(--edge); outline-offset: 2px; }
main { display: block; }

/* keyboard focus: one visible ring everywhere — brand blue on light sections, white on the blue ones */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
:is(.hdr, .drawer, .hero, .dark, .final, .match, .opp, .foot, .strip, .plan.pro, .free-banner, .bn.feat, .pnode.dk) :focus-visible { outline-color: #fff; }
.langmenu a:focus-visible { outline-color: var(--blue); outline-offset: -2px; }
/* in-page jumps (#how, #pricing, #faq …) land below the 73px sticky header, not under it */
html { scroll-padding-top: 73px; }

/* brand mark before the wordmark (header): sits on the cap height, scales with the wordmark */
.logo .logo-mark { width: auto; height: 1.5em; flex: none; margin-right: .5em; display: block; }

/* ───────── partner logos (2026-11-06): a static grid under the hero — heading, then logos in rows (Moka-style); build.py writes the markup ───────── */
.partners { background: #fff; color: #0B2A40; border-bottom: 1px solid #E3EBF1; position: relative; z-index: 3; padding: clamp(40px, 5vw, 64px) 0; }
.partners-h { margin: 0 0 clamp(24px, 3vw, 40px); text-align: center; text-wrap: balance; font-family: var(--f-disp); font-weight: 800;
  font-size: clamp(22px, 2.4vw, 34px); line-height: 1.2; letter-spacing: -.01em; color: #0B2A40; }
.partners-grid { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; padding: 0; list-style: none; max-width: 1280px; row-gap: 8px; }
.partners-grid li { flex: 0 0 calc(100% / 7); min-width: 0; height: 88px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 12px; box-sizing: border-box; }
.partners-grid img { display: block; width: auto; height: 36px; max-width: 100%; object-fit: contain; }
.partners-grid li.wordmark img { height: var(--h, 40px); }
.partners-grid img { flex: none; }
.partners-grid span { min-width: 0; font-size: 15px; line-height: 1.15; font-weight: 700; letter-spacing: .01em; font-variation-settings: "wdth" 108; text-wrap: balance; }   /* a long name breaks onto a second line instead of running into the next logo */
@media (max-width: 1100px) { .partners-grid li { flex-basis: 20%; } }
@media (max-width: 760px) { .partners-grid li { flex-basis: 33.333%; height: 76px; } }
@media (max-width: 520px) {
  .partners-grid li { flex-basis: 50%; height: 72px; padding: 0 8px; }
  .partners-grid li.wordmark img { height: calc(var(--h, 40px) * .85); }
  .partners-grid img { height: 30px; }
  .partners-grid span { font-size: 14px; }
}

/* ---------- app download (talent): phone hero · phone sticky bar · final CTA + QR ---------- */
/* lines and muted text follow the final CTA above it (white 20 % rule, --on-blue text) */
/* official badge artwork only: never recoloured; "coming soon" just lowers its opacity */
.store-badge { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; line-height: 0; flex: none; }
.store-badge img { display: block; width: auto; height: 40px; }
a.store-badge img { border-radius: 8px; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
a.store-badge:hover img { transform: translateY(-2px); }
a.store-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 10px; }
.store-badge.is-soon img { opacity: .6; }
.store-badge em { font-style: normal; font-family: var(--f-mono); font-size: 11px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.store-also { display: none; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; opacity: .8; }

.hero-store { display: none; }                         /* desktop: the first screen keeps "See How It Works"; download lives in the final CTA */
.m-cta .store-badge { display: none; }

.final-app { position: relative; margin-top: 44px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,.2); display: flex; justify-content: space-between; align-items: center; gap: 32px 48px; flex-wrap: wrap; }
.final-app-copy .mono { display: block; margin-bottom: 16px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-blue, #C7DCEA); }
.final-app-badges { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.final-app-qr { margin: 0; display: flex; align-items: center; gap: 18px; }
.final-app-qr img { width: 112px; height: 112px; padding: 10px; background: #fff; border-radius: 12px; box-sizing: content-box; }
.final-app-qr figcaption { max-width: 170px; font-size: 14px; line-height: 1.45; color: var(--on-blue, #C7DCEA); }

@media (max-width: 860px) {
  /* phone: the store for this phone replaces "See How It Works" (os-other / unknown → both badges) */
  .hero .hero-ctas > .btn-ghost { display: none; }
  .hero-store { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 12px 14px; }
  .hero-store .store-badge img { height: 48px; }
  .os-ios .hero-store .store-badge[data-store="android"], .os-android .hero-store .store-badge[data-store="ios"] { display: none; }
  .os-ios .hero-store .store-also[data-store="android"], .os-android .hero-store .store-also[data-store="ios"] { display: block; flex-basis: 100%; text-align: center; }
  /* store live for this phone: the download becomes the main action, web sign-up follows */
  .app-live .hero-store { order: -1; }
  .app-live .hero-store .store-badge img { height: 56px; }
  /* sticky bar: the same badge, once live */
  .app-live .m-cta { justify-content: center; padding: 8px; border-radius: 16px; background: rgba(10,10,10,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
  .app-live .m-cta .btn { display: none; }
  .app-live.os-ios .m-cta .store-badge[data-store="ios"], .app-live.os-android .m-cta .store-badge[data-store="android"] { display: inline-flex; }
  .app-live .m-cta .store-badge img { height: 48px; }
  .final-app-qr { display: none; }                       /* the phone in hand is the one to install on */
}
@media (max-width: 560px) { .hero-store { width: 100%; } }

/* arriving from a printed QR code: the badge glows twice so the eye lands on it */
.from-qr .hero-store .store-badge img { animation: qr-ping 1.3s cubic-bezier(.2,.8,.2,1) .9s 2; }
@keyframes qr-ping { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.75); } 100% { box-shadow: 0 0 0 14px rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .from-qr .hero-store .store-badge img { animation: none; } a.store-badge img { transition: none; } }