/* JPS168 — clean company site, light only + mobile-first tweaks */
:root{
  color-scheme:light;
  --bg:#ffffff;
  --bg-soft:#fafafa;
  --text:#111111;
  --text-2:#555555;
  --border:#e5e5e5;
  --accent:#0B5F4B;
  --danger:#b42318;
  --font:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap:980px;
  --radius:8px;
  --header-h:56px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + 12px);overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;padding:0;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--bg);color:var(--text);
  font:16px/1.5 var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.nav-open{overflow:hidden;touch-action:none}
body.nav-open header.top{z-index:45}
img{max-width:100%;display:block}
[hidden]:not([hidden="until-found" i]){display:none!important}
.wrap{
  max-width:var(--wrap);margin:0 auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px));
  width:100%;
}
h1,h2,h3{font-family:var(--font);line-height:1.15;text-wrap:balance;margin:0;font-weight:600;letter-spacing:-.02em;color:var(--text)}
h1{font-size:clamp(1.75rem,4.5vw,3rem);font-weight:600}
h2{font-size:clamp(1.35rem,2.8vw,2rem)}
h3{font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
p{margin:0;max-width:52ch;color:var(--text-2)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:lang(ko),:lang(zh),[lang="ko"],[lang="zh-Hans"]{word-break:keep-all;overflow-wrap:anywhere}
.eyebrow{font:500 .8rem/1.3 var(--font);letter-spacing:.02em;color:var(--text-2)}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:20;background:var(--bg)}
header.top{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:15;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px;min-height:var(--header-h);max-width:1100px}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--text);flex-shrink:0}
.brand:hover{text-decoration:none}
.brand b{font:600 1.05rem/1 var(--font);letter-spacing:-.03em}
.brand span{font:500 .68rem/1 var(--font);color:var(--text-2)}
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
nav.links{display:flex;gap:14px;flex-wrap:nowrap;align-items:center}
nav.links a{color:var(--text-2);text-decoration:none;font-size:.8125rem;white-space:nowrap}
nav.links a:hover,nav.links a[aria-current="page"]{color:var(--text);text-decoration:none}
.auth-links{display:flex;align-items:center;gap:8px;margin-right:4px}
.auth-links a{font-size:.875rem;color:var(--text-2);text-decoration:none}
.auth-links a:hover{color:var(--text)}
.auth-links .sep{color:var(--border);user-select:none}

.lang-switch{display:inline-flex;border:1px solid var(--border);border-radius:980px;overflow:hidden}
.lang-switch button{
  font:500 .72rem/1 var(--font);
  padding:7px 10px;min-height:36px;min-width:40px;border:0;background:transparent;color:var(--text-2);cursor:pointer;
}
.lang-switch button[aria-pressed="true"]{background:var(--text);color:#fff}
.lang-switch button + button{border-left:1px solid var(--border)}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:980px;
  border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer;
}
.icon-btn:hover{background:var(--bg-soft)}
.menu-btn{display:none}

.mobile-nav{
  display:none;position:fixed;inset:0;z-index:50;
  background:#fff;
  padding:calc(var(--header-h) + env(safe-area-inset-top,0px) + 12px) 20px calc(24px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.mobile-nav[data-open="true"]{display:block}
.mobile-nav-inner{display:flex;flex-direction:column;gap:4px;max-width:480px;margin:0 auto}
.mobile-nav a{
  display:block;padding:14px 8px;color:var(--text);text-decoration:none;font-weight:500;font-size:1.05rem;
  border-radius:var(--radius);min-height:44px;
}
.mobile-nav a:hover,.mobile-nav a[aria-current="page"]{background:var(--bg-soft);text-decoration:none}
.mobile-nav .btn{margin-top:12px;width:100%;min-height:48px}
.mobile-nav .mobile-auth{display:flex;gap:20px;padding:12px 8px;font-size:1rem;border-top:1px solid var(--border);margin-top:8px}
.mobile-nav .lang-switch{margin:4px 8px 16px;align-self:flex-start}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:500 .9rem/1 var(--font);padding:12px 20px;min-height:44px;
  border-radius:980px;border:1px solid transparent;cursor:pointer;text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--text);color:#fff;border-color:var(--text)}
.btn-primary:hover{background:#222;border-color:#222}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn-ghost:hover{background:var(--bg-soft)}
.btn:disabled{opacity:.5;cursor:not-allowed}

@media (max-width:920px){
  nav.links{display:none}
  .desktop-only{display:none!important}
  .menu-btn{display:inline-flex}
  .brand span{display:none}
}

/* Sections */
section{padding-block:clamp(48px,8vw,96px)}
.hero{padding-block:clamp(40px,7vw,80px) clamp(48px,8vw,96px)}
.hero-home .hero-center{display:flex;flex-direction:column;gap:20px;align-items:flex-start;max-width:640px}
.hero-copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.hero-copy p.lede,.hero-center p.lede{font-size:1.125rem;color:var(--text-2);max-width:40ch;line-height:1.55}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px;
  padding-top:20px;margin:4px 0 0;border-top:1px solid var(--border);width:100%;
}
.facts div{display:flex;flex-direction:column;gap:4px}
.facts dt{font:500 .75rem/1.3 var(--font);color:var(--text-2)}
.facts dd{margin:0;font:500 .95rem/1.35 var(--font);color:var(--text)}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pillar{
  display:flex;flex-direction:column;gap:10px;padding:24px 20px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);
  text-decoration:none;color:inherit;min-width:0;
}
.pillar:hover{border-color:#ccc;text-decoration:none}
.pillar h3{color:var(--text)}
.pillar p{max-width:none;font-size:.92rem}
.pillar-link{font:500 .85rem/1 var(--font);color:var(--accent);margin-top:auto;padding-top:8px}
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:36px;max-width:36rem}
.sec-head-center{margin-left:auto;margin-right:auto;text-align:center;align-items:center}
.sec-head-center p{text-align:center}
.sec-head p{color:var(--text-2);font-size:1.05rem}
.cta-band{display:flex;flex-direction:column;gap:14px;align-items:flex-start;max-width:520px}
.cta-band h2{max-width:20ch}
.band{background:var(--bg-soft);border-block:1px solid var(--border)}

/* Ledger */
.ledger{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;min-width:0;max-width:520px}
.ledger-wrap .ledger{max-width:560px}
.ledger-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--border);background:var(--bg-soft);
}
.ledger-head b{font:500 .9rem/1.3 var(--font);color:var(--text)}
.tag{font:500 .7rem/1 var(--font);padding:5px 8px;border-radius:980px;background:var(--bg);color:var(--text-2);border:1px solid var(--border);white-space:nowrap;flex-shrink:0}
.ledger-row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 18px;border-bottom:1px solid var(--border)}
.ledger-row .what{font-weight:500;font-size:.92rem;color:var(--text);min-width:0}
.ledger-row .amt{font-variant-numeric:tabular-nums;text-align:right;font-size:.9rem;color:var(--text);white-space:nowrap}
.ledger-row .meta{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.82rem;color:var(--text-2)}
.pill{font:500 .7rem/1 var(--font);padding:4px 8px;border-radius:980px;white-space:nowrap}
.pill.released{background:#e8f5f0;color:var(--accent)}
.pill.held{background:#f5f5f5;color:var(--text)}
.pill.pending{background:transparent;color:var(--text-2);border:1px solid var(--border)}
.ledger-foot{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:14px 18px;background:var(--bg-soft);font-size:.85rem;border-top:1px solid var(--border);color:var(--text-2)}
.ledger-foot .amt{font-variant-numeric:tabular-nums;text-align:right;color:var(--text);white-space:nowrap}
.ledger-foot .total{font-weight:600;color:var(--text)}
.ledger-note{padding:12px 18px 16px;font-size:.78rem;color:var(--text-2);margin:0;max-width:none;line-height:1.45}

/* Flows */
.flows{display:grid;grid-template-columns:1fr 1fr;gap:40px 56px}
.flow h3{margin-bottom:16px;font-size:1.1rem}
.flow ol{list-style:none;margin:0;padding:0;counter-reset:s;display:flex;flex-direction:column}
.flow li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;gap:2px 12px;padding:16px 0;border-top:1px solid var(--border)}
.flow li::before{content:counter(s);grid-row:1/3;font:500 .85rem/1.5 var(--font);color:var(--text-2)}
.flow li b{font-weight:600;font-size:.95rem;color:var(--text)}
.flow li span{color:var(--text-2);font-size:.9rem}

/* Roles */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.role{padding:22px 20px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:10px;min-width:0;background:var(--bg)}
.role:nth-child(3n){border-right:0}
.role:nth-child(n+4){border-bottom:0}
.role .stack{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:500 .72rem/1 var(--font);padding:5px 8px;border:1px solid var(--border);border-radius:980px;color:var(--text-2);background:var(--bg-soft)}
.role p{color:var(--text-2);font-size:.88rem;max-width:none}

.vetting{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
.vetting-top{margin-top:0}
.vetting > div{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--border)}
.vetting p{color:var(--text-2);font-size:.88rem;max-width:none}

.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.trust-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:24px 20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.trust-card .fig{font:600 1.15rem/1.3 var(--font);letter-spacing:-.02em;color:var(--text)}
.trust-card .fig.stamp{display:inline-block;align-self:flex-start;font:600 .9rem/1 var(--font);padding:8px 10px;border:1px solid var(--border);color:var(--text);border-radius:var(--radius);background:var(--bg-soft)}
.trust-card p{color:var(--text-2);font-size:.88rem;max-width:none}
.parties{margin-top:28px;padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:center}
.party{display:flex;flex-direction:column;gap:4px;text-align:center;padding:6px}
.party b{font-weight:600;font-size:.9rem;color:var(--text)}
.party span{font-size:.78rem;color:var(--text-2)}
.party-arrow{font:500 .78rem/1 var(--font);color:var(--text-2)}

.protect{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:start}
.protect .sec-head{margin-bottom:0}
.protect dl{margin:0;display:flex;flex-direction:column}
.protect dl > div{display:grid;grid-template-columns:minmax(100px,140px) 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--border)}
.protect dt{font-weight:600;font-size:.92rem;color:var(--text)}
.protect dd{margin:0;color:var(--text-2);font-size:.92rem;max-width:none}

.pricing{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.price{display:grid;grid-template-columns:140px minmax(120px,180px) 1fr;gap:12px 20px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--border)}
.price .fig{font:600 1.2rem/1.2 var(--font);color:var(--text);letter-spacing:-.02em}
.price p{color:var(--text-2);font-size:.9rem;max-width:none}

.forms{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.form-single{max-width:560px}
form.card, .auth-card{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(20px,2.5vw,28px);display:flex;flex-direction:column;gap:14px;min-width:0;
}
form.card h3, .auth-card h1{font-size:1.35rem;font-weight:600}
form.card > p, .auth-card > p{color:var(--text-2);font-size:.9rem}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label,.field .lab{font-weight:500;font-size:.86rem;color:var(--text)}
.field .hint{font-size:.78rem;color:var(--text-2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,select,textarea{
  font:inherit;font-size:16px;color:var(--text);background:var(--bg);
  border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;width:100%;min-height:44px;
  max-width:100%;
}
textarea{min-height:100px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger)}
.err{font-size:.78rem;color:var(--danger)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}
.seg{display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:980px;overflow:hidden;width:100%;max-width:300px}
.seg button{font:500 .85rem/1 var(--font);padding:10px 12px;min-height:44px;background:transparent;color:var(--text-2);border:0;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--text);color:#fff}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--text-2)}
.check input{width:auto;margin-top:3px;min-height:0}
.form-note{font-size:.78rem;color:var(--text-2)}
.form-note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem}

.faq{display:flex;flex-direction:column;max-width:720px}
.faq details{border-top:1px solid var(--border);padding:16px 0}
.faq details:last-child{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:flex-start;font-size:.95rem;color:var(--text);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--text-2);flex-shrink:0;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:8px;color:var(--text-2);font-size:.92rem;max-width:none}

.about-dl{margin:0 0 20px;display:flex;flex-direction:column;gap:0;max-width:480px}
.about-dl > div{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--border)}
.about-dl dt{font-weight:500;font-size:.85rem;color:var(--text-2)}
.about-dl dd{margin:0;color:var(--text)}
.prose-lite h2{margin-bottom:12px}
.prose-lite p{max-width:60ch}

footer{background:#111;color:#f5f5f5;padding-block:56px 40px;margin-top:0}
footer .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:28px}
footer a{color:#bbb}
footer a:hover{color:#fff}
footer p,footer dd{color:#999}
footer .brand,footer .brand b{color:#fff}
footer .foot-brand{display:flex;flex-direction:column;gap:12px}
footer .foot-nav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 18px;font-size:.85rem}
footer dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.85rem}
footer dt{font:500 .72rem/1.5 var(--font);color:#777}
footer dd{margin:0;color:#ccc}
footer .legal{grid-column:1/-1;border-top:1px solid #2a2a2a;padding-top:20px;font-size:.78rem;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;color:#888}
footer .legal-links{display:flex;gap:14px;flex-wrap:wrap}

.page-hero{padding-block:clamp(36px,6vw,64px) 20px}
.page-hero .wrap{max-width:720px}
.page-hero h1{font-size:clamp(1.6rem,3.2vw,2.4rem)}
.page-hero p{color:var(--text-2);margin-top:12px;max-width:48ch}
.page-hero .meta{font:500 .75rem/1.4 var(--font);color:var(--text-2);margin:0}
.prose{padding-bottom:clamp(48px,8vw,88px)}
.prose .wrap{max-width:680px}
.prose h2{font-size:1.15rem;margin:32px 0 10px}
.prose h3{font-size:1rem;margin:20px 0 6px;font-weight:600}
.prose p,.prose li{color:var(--text-2);margin-bottom:10px}
.prose ul{padding-left:1.15em;margin:0 0 14px}
.prose .meta{font:500 .75rem/1.4 var(--font);color:var(--text-2)}

.thank{min-height:58vh;display:flex;align-items:center;padding-block:clamp(40px,7vw,80px)}
.thank .card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(24px,3.5vw,40px);max-width:480px;display:flex;flex-direction:column;gap:14px;width:100%}
.thank .card h1{font-size:clamp(1.5rem,2.8vw,2rem)}
.thank .card p{color:var(--text-2)}

.auth-page{min-height:70vh;display:flex;align-items:center;padding-block:clamp(36px,6vw,72px)}
.auth-page .wrap{max-width:420px;width:100%}
.auth-card .stub-banner{font-size:.85rem;line-height:1.45;padding:12px 14px;background:var(--bg-soft);border:1px solid var(--border);color:var(--text);border-radius:var(--radius)}
.auth-alt{display:flex;flex-direction:column;gap:8px;padding-top:8px;border-top:1px solid var(--border)}
.auth-alt .lab{font-size:.75rem;color:var(--text-2);font-weight:500}
.auth-foot{font-size:.85rem;color:var(--text-2);margin-top:4px}
.auth-success{padding:12px;background:#e8f5f0;border:1px solid #cfe8de;border-radius:var(--radius);font-size:.9rem;color:var(--text)}

/* ===== Mobile ≤768 ===== */
@media (max-width:768px){
  .wrap{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  section{padding-block:48px}
  .hero,.hero-home{padding-block:36px 48px}
  .hero-home .hero-center{align-items:center;text-align:center;max-width:none}
  .hero-home .lede{text-align:center;max-width:36ch;margin-inline:auto}
  .hero-home .cta-row{width:100%;flex-direction:column;align-items:stretch}
  .hero-home .cta-row .btn{width:100%}
  .hero-home .facts{grid-template-columns:1fr;text-align:left;gap:14px}
  h1{font-size:clamp(1.65rem,7vw,2.1rem)}
  .cta-row{width:100%}
  .cta-band{align-items:stretch;text-align:center;max-width:none}
  .cta-band .cta-row{flex-direction:column}
  .cta-band .btn{width:100%}
  .sec-head-center{text-align:center}
  .pillars{grid-template-columns:1fr}
  .flows{grid-template-columns:1fr;gap:32px}
  .roles{grid-template-columns:1fr}
  .role{border-right:0!important}
  .role:nth-child(n+4){border-bottom:1px solid var(--border)}
  .role:last-child{border-bottom:0}
  .vetting{grid-template-columns:1fr;gap:16px;margin-top:32px}
  .trust-grid{grid-template-columns:1fr}
  .parties{grid-template-columns:1fr;text-align:center}
  .party-arrow{transform:rotate(90deg);justify-self:center}
  .protect{grid-template-columns:1fr}
  .protect dl > div{grid-template-columns:1fr;gap:4px}
  .price{grid-template-columns:1fr;gap:6px}
  .forms,.row2{grid-template-columns:1fr}
  .form-single{max-width:none}
  .page-hero{text-align:center}
  .page-hero .wrap{margin:0 auto}
  .page-hero p{margin-inline:auto}
  .ledger{max-width:none}
  .ledger-head{flex-direction:column;align-items:flex-start}
  .ledger-row{grid-template-columns:1fr;gap:6px}
  .ledger-row .amt{text-align:left}
  .ledger-foot{grid-template-columns:1fr;gap:4px}
  .ledger-foot .amt{text-align:left}
  footer .wrap{grid-template-columns:1fr}
  .about-dl > div{grid-template-columns:1fr;gap:2px}
  .seg{max-width:none}
  .thank .cta-row{flex-direction:column}
  .thank .btn{width:100%}
}

@media (max-width:400px){
  h1{font-size:1.55rem}
  .brand b{font-size:1rem}
}