/* Trust Infrastructure — product-led, evidence-first art direction. */
:root{
  --paper:#f1efe8;
  --surface:#f7f5ef;
  --ink:#10150f;
  --muted:#60665e;
  --line:#c8c8bd;
  --soft:#e8e6de;
  --navy:#162019;
  --navy-2:#1e2a21;
  --green:#2a6650;
  --green-soft:#e1ebe5;
  --red:#a43d3e;
  --red-soft:#f1e0df;
  --amber:#866123;
  --amber-soft:#eee6d5;
  --radius:2px;
}
body{background:var(--paper);color:var(--ink)}
.wrap{max-width:1360px;padding-inline:38px}

/* Product evidence remains the source of truth. */
.product-actual{
  display:block;width:100%!important;height:100%!important;max-width:none!important;
  object-fit:cover;transform:none!important;background:#e7e6df
}

/* Japanese display copy wraps only between explicit phrases. */
html[lang="ja"] .jp-heading,
html[lang="ja"] .jp-copy,
html[lang="ja"] .jp-hero-title{line-break:strict;overflow-wrap:normal;text-wrap:balance}
html[lang="ja"] .jp-phrase{display:inline-block;white-space:nowrap}
html[lang="ja"] .jp-hero-title .jp-phrase{display:block}
html[lang="ja"] .jp-heading .jp-phrase+.jp-phrase{margin-left:.12em}
html[lang="ja"] .jp-stack .jp-phrase{display:block;margin-left:0}
html[lang="ja"] .jp-line{display:block}
html[lang="ja"] .jp-line .jp-phrase+.jp-phrase{margin-left:.14em}
html[lang="ja"] p{line-break:strict;text-wrap:pretty}

/* Hard infrastructure frame: no floating SaaS chrome. */
.site-header{background:var(--paper);border-bottom:1px solid var(--ink)}
.header-row{min-height:70px}
.brand{font-size:20px;letter-spacing:-.045em}
.brand-mark{width:24px;height:29px;border:0;border-radius:0;background:var(--ink);color:#f4f1e9;font-size:14px}
.desktop-nav{gap:22px;font:650 12px/1.3 var(--mono)}
.desktop-nav a{padding:9px 0;color:var(--muted)}
.desktop-nav a:hover,.text-link:hover{color:var(--ink)}
.nav-git{border:1px solid var(--ink);padding:8px 11px!important;border-radius:1px;color:var(--ink)!important}
.mobile-nav summary{border:1px solid var(--ink);border-radius:1px;background:transparent}
.mobile-nav>div{background:var(--surface);border-color:var(--ink);box-shadow:none}
.eyebrow{gap:9px;margin-bottom:20px;color:var(--green);font-size:10px;letter-spacing:.14em}
.eyebrow>span{width:8px;height:2px;border-radius:0;background:var(--green)}
.button{min-height:46px;padding:11px 16px;border:1px solid var(--ink);border-radius:1px;font-size:13px}
.button.primary{background:var(--ink);border-color:var(--ink);color:#f7f4ed}.button.primary span{color:#a8d0bd}
.text-link{font-size:13px;text-decoration-color:#9b9e96}

/* Hero: the actual workbench dominates the first viewport. */
.hero{padding:70px 0 58px;background:var(--paper);border-bottom:1px solid var(--ink)}
.hero-grid{grid-template-columns:.66fr 1.34fr;gap:58px;align-items:center}
.hero-copy{padding-bottom:0}
.hero h1{font-size:clamp(52px,5.5vw,82px);font-weight:690;line-height:.98;letter-spacing:-.062em}
.hero h1 em{color:var(--green)}
.lead{margin-top:26px;font-size:17px;line-height:1.76;max-width:38ch}
.hero-actions{gap:19px;margin-top:28px}.hero-note{margin-top:17px;font-size:11px;max-width:58ch}
.product-shot{position:relative;margin:0;border-top:1px solid var(--ink)}
.shot-chrome{height:38px;padding:0 12px;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;color:var(--muted);font-size:8px;letter-spacing:.13em}
.shot-window{height:600px;border:1px solid var(--ink);border-top:0;border-radius:0;background:#e5e5de;box-shadow:none}
.hero-shot .product-actual{object-position:50% 28%}
.product-shot figcaption{margin-top:8px;font:9px/1.5 var(--mono);letter-spacing:.05em;color:var(--muted)}

/* Signature moment = a policy decision moving through infrastructure. */
.signature-section{padding:62px 0 74px;background:var(--navy);color:#f6f3eb;border-block:1px solid #0c110d}
.signature-section .signature-head{margin-bottom:31px}
.signature-section .signature-head .eyebrow{color:#93c5ad}
.signature-section .signature-head h2{color:#fff;max-width:14ch;font-size:clamp(34px,3.3vw,49px)}
.signature-section .signature-head p:last-child{color:#9eaca0;max-width:46ch}
.signature-moment{grid-template-columns:1fr 1fr 1fr;gap:0;border:1px solid #4a564d;border-radius:0;background:#4a564d;overflow:hidden;box-shadow:none}
.sig-step{min-height:220px;background:#162019;color:#fff;padding:30px 28px;border-right:1px solid #4a564d;justify-content:flex-end}
.sig-step:last-child{border-right:0}.sig-step.verdict{background:#291b1b}
.sig-no{top:23px;left:28px;color:#91c4ab;font-size:10px}
.sig-label{color:#91c4ab}.verdict .sig-label{color:#e08d8d}
.sig-step strong{font-size:20px;line-height:1.4;letter-spacing:-.032em;color:#fff;max-width:19ch}
.sig-step small{color:#96a398;max-width:29ch}.verdict small{color:#cba8a8}
.signature-line{left:29px;right:29px;top:55px;background:#59645b}
.signature-line i{height:2px;background:#86bea3}
.signature-moment.is-visible .signature-line i{animation:trust-pass 2s cubic-bezier(.2,.75,.28,1) .12s forwards}
@keyframes trust-pass{0%{width:0;background:#86bea3}70%{width:68%;background:#86bea3}100%{width:100%;background:#c55b5c}}
.signature-outcome{display:flex;align-items:center;justify-content:flex-end;gap:13px;padding:15px 0 0;color:#9eaca0;font:700 9px/1.4 var(--mono);letter-spacing:.1em}
.signature-outcome strong{font:700 12px/1.4 var(--sans);letter-spacing:-.01em;color:#fff}.signature-outcome code{color:#9ed0b7;font-size:10px}

/* Sections read like audit records rather than marketing cards. */
.section{padding:92px 0;border-top:1px solid var(--ink)}
.story{background:var(--surface)}
.story-row{grid-template-columns:.60fr 1.40fr;gap:74px;min-height:460px;padding:28px 0}
.story-row+.story-row{border-top:1px solid var(--line)}
.story-row.reverse{grid-template-columns:1.28fr .72fr}
.story-copy p:not(.eyebrow){font-size:16px;margin-top:20px;max-width:38ch}
.story-copy h2{font-size:clamp(34px,3.8vw,54px)}
.product-crop{height:410px;border:1px solid var(--ink);border-radius:0;background:#e4e5de;box-shadow:none}
.crop-input .product-actual{object-position:50% 27%}.crop-history .product-actual{object-position:50% 82%}
.decision-proof{border:1px solid var(--ink);border-radius:0;background:#eee5e2;padding:30px 32px}
.proof-top{padding-bottom:10px;border-bottom:1px solid #b9a9a5;font-size:9px;letter-spacing:.08em;color:#6c6462}
.proof-top b{background:transparent;color:var(--red);padding:0;border-radius:0;font:800 10px var(--mono)}
.decision-proof h3{font-size:28px;margin-top:28px}.decision-proof>p{font-size:13px;margin-top:12px}
.decision-proof dl{grid-template-columns:118px 1fr;margin-top:24px;border-top:1px solid #baa9a6;font-size:11px}
.decision-proof dt,.decision-proof dd{border-bottom-color:#c9bab7}.decision-proof small{font-size:11px}

.examples{background:#e8e7e0}
.sample-layout{grid-template-columns:.62fr 1.38fr;gap:72px}
.sample-copy>p:not(.eyebrow){font-size:15px;margin-top:20px}.sample-legend{gap:0;margin-top:25px;border:1px solid var(--line);width:max-content}
.sample-legend span{font:700 9px var(--mono);padding:7px 10px;border:0;border-right:1px solid var(--line);border-radius:0;background:transparent}.sample-legend span:last-child{border-right:0}
.preview{background:var(--surface);border:1px solid var(--ink);border-radius:0;overflow:hidden}
.sample-tabs{grid-template-columns:repeat(4,1fr);background:#d9d8d1;border-bottom:1px solid var(--ink);padding:0;gap:0}
.sample-tabs button{border:0;border-right:1px solid #b9b9b0;background:transparent;border-radius:0;padding:13px 5px;color:#62665f;font:700 11px var(--mono)}
.sample-tabs button:last-child{border-right:0}.sample-tabs button[aria-selected=true]{background:var(--ink);color:#f8f5ed;border-color:var(--ink)}
.sample-panel{padding:28px 30px;min-height:326px}
.sample-kicker{font-size:9px;letter-spacing:.08em}.status{padding:4px 7px;border-radius:0;font-size:10px}.sample-panel h3{font-size:25px;margin-top:22px}
.reason{margin:24px 0;border-left:2px solid var(--green);padding-left:15px}.technical{border-top-color:var(--line)}

.workbench{background:var(--surface)}
.workbench-grid{grid-template-columns:.46fr 1.54fr;gap:64px}.workbench-copy{top:104px;padding-top:22px}.workbench-copy>p:not(.eyebrow){font-size:16px;margin:22px 0 28px}
.workbench-shot{border-top:1px solid var(--ink)}.workbench-shot .shot-window{height:720px;border-radius:0}.workbench-shot .product-actual{object-position:50% 39%}

.film-section{padding:72px 0;background:var(--navy);color:#f6f3eb;border-top:1px solid #0e140f}
.film-grid{grid-template-columns:.58fr 1.42fr;gap:72px}.film-grid>div>p:not(.eyebrow){font-size:15px;color:#9ea99f;margin-top:20px}.film-grid .eyebrow{color:#93c5ad}.film-grid h2{color:#fff}
.film-card{border-radius:0;background:#0e140f;border:1px solid #465148}.film-splash span{left:17px;bottom:17px;background:#f3f0e8;color:#10150f;padding:9px 12px;border-radius:0;font-size:10px}.film-card figcaption{border-top-color:#465148;color:#98a399;font-size:10px}
.transcript p{color:#9ea99f}

.scope{background:var(--paper)}
.scope-grid{grid-template-columns:.60fr 1.40fr;gap:72px}.scope-grid>div:first-child>p:not(.eyebrow){font-size:15px;margin:20px 0 24px}
.scope-columns{border-color:var(--ink)}.scope-columns article{padding:30px}.scope-columns article+article{border-left-color:var(--ink)}
.scope-icon{width:26px;height:26px;border-radius:0;margin-bottom:18px}.scope-columns h3{font-size:17px}.scope-columns ul{font-size:13px;color:var(--muted)}

.start{background:#e8e7e0}.start-grid{grid-template-columns:.58fr 1.42fr;gap:72px}.start-grid>div:first-child>p:not(.eyebrow){font-size:15px;margin-top:20px}.start-actions{gap:18px;margin-top:25px}
.code-box{background:#10150f;color:#e5e9e3;border-radius:0;border:1px solid #10150f}.code-bar{border-bottom-color:#475047;color:#9ca89d}.copy{border:1px solid #737d74;background:transparent;color:#fff;padding:6px 10px;border-radius:0}.code-box pre{color:#b9dcc8}.copy-status{color:#9aa69b}

.faq{background:var(--surface)}.faq-grid{grid-template-columns:.50fr 1.50fr;gap:80px}.faq-grid details{border-color:var(--line)}
.footer{background:var(--ink)!important;color:#a7afa6!important;border-top:1px solid var(--ink)!important}

@media (min-width:1121px){
  .hero-grid{grid-template-columns:.66fr 1.34fr}
  .story-row{grid-template-columns:.58fr 1.42fr}
  .story-row.reverse{grid-template-columns:1.30fr .70fr}
  .workbench-grid{grid-template-columns:.46fr 1.54fr}
}

@media (max-width:1100px){
  .wrap{padding-inline:30px}
  .hero{padding:58px 0 48px}.hero-grid{grid-template-columns:1fr;gap:32px}.shot-window{height:500px}.hero-shot .product-actual{object-position:50% 27%}
  .signature-section{padding:54px 0 62px}.section{padding:72px 0}
  .story-row,.story-row.reverse{grid-template-columns:1fr;min-height:0;gap:34px;padding:26px 0}.story-row.reverse .story-copy{order:0}.story-row.reverse .decision-proof{order:0}.product-crop{height:380px}
  .sample-layout,.film-grid,.scope-grid,.start-grid,.faq-grid{grid-template-columns:1fr;gap:42px}.workbench-grid{grid-template-columns:1fr;gap:38px}.workbench-copy{position:static;padding-top:0}.workbench-shot .shot-window{height:620px}
}

@media (max-width:820px){
  .signature-moment{grid-template-columns:1fr}
  .sig-step{min-height:145px;padding:27px 22px 23px 70px;border-right:0;border-bottom:1px solid #4a564d}.sig-step:last-child{border-bottom:0}.sig-no{left:23px;top:25px}
  .signature-line{left:36px;right:auto;top:30px;bottom:30px;width:1px;height:auto}.signature-line i{width:2px;height:0;margin-left:-1px}
  .signature-moment.is-visible .signature-line i{animation:trust-pass-mobile 2s cubic-bezier(.2,.75,.28,1) .12s forwards}
  @keyframes trust-pass-mobile{0%{height:0;background:#86bea3}70%{height:68%;background:#86bea3}100%{height:100%;background:#c55b5c}}
  .signature-outcome{justify-content:flex-start;flex-wrap:wrap}
  .sample-tabs{grid-template-columns:1fr 1fr}.sample-tabs button:nth-child(2){border-right:0}.sample-tabs button:nth-child(-n+2){border-bottom:1px solid #b9b9b0}
}

@media (max-width:600px){
  .wrap{padding-inline:20px}.header-row{min-height:64px}
  .hero{padding:42px 0 35px}.hero-grid{gap:23px}.hero h1{font-size:clamp(38px,12vw,48px);line-height:1.04}.hero .lead{max-width:none;font-size:15px}.shot-window{height:360px}
  html[lang="ja"] .jp-hero-title{font-size:clamp(36px,11.8vw,46px)!important;line-height:1.08}.hero-shot .product-actual{object-position:50% 25%}
  .signature-section{padding:43px 0 52px}.signature-section .signature-head h2{font-size:30px;max-width:11ch}.signature-section .signature-head p:last-child{font-size:13px}
  .section{padding:56px 0}.story-row{padding:14px 0;gap:21px}.story-copy h2{font-size:clamp(30px,9.5vw,41px)}.product-crop{height:310px}.crop-input .product-actual{object-position:50% 26%}.crop-history .product-actual{object-position:50% 84%}
  .sample-panel{padding:22px 19px}.sample-tabs button{font-size:9px}.workbench-shot .shot-window{height:470px}.workbench-shot .product-actual{object-position:50% 38%}.film-section{padding:49px 0}
  html[lang="ja"] .jp-heading .jp-phrase+.jp-phrase{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .signature-moment.is-visible .signature-line i{animation:none;width:100%;height:100%;background:#86bea3}
}