/* ===== Reset & base ===== */
*{box-sizing:border-box;}
body{margin:0;}
h1,h2,h3,h4,p,ul,ol,li,dl,dd,table,figure{margin:0;padding:0;}
ul,ol{list-style:none;}
img{max-width:100%;display:block;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
table{border-collapse:collapse;width:100%;}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:top;font-size:14.5px;line-height:1.7;}
th{background:var(--surface-deep);color:var(--white);font-weight:700;white-space:nowrap;border-bottom:none;}
.zebra tbody tr:nth-child(even){background:var(--surface);}
.table-fields7 th{text-align:center;}
.table-fields7 td{vertical-align:middle;}

/* ===== Tokens ===== */
:root{
  --ink:oklch(0.28 0.035 255);
  --ink-soft:oklch(0.48 0.025 255);
  --ink-faint:oklch(0.66 0.018 255);
  --bg:oklch(0.99 0.006 85);
  --surface:oklch(0.965 0.004 90);
  --surface-deep:oklch(0.4 0.09 255);
  --surface-deep-2:oklch(0.3 0.08 255);
  --accent:#3d84c6;
  --accent-soft:oklch(0.94 0.035 250);
  --accent-soft-2:oklch(0.84 0.06 250);
  --accent-pale:oklch(0.975 0.016 250);
  --accent-2:oklch(0.78 0.13 55);
  --accent-2-soft:oklch(0.95 0.05 60);
  --border:oklch(0.9 0.014 250);
  --white:oklch(1 0 0);
  --warn:oklch(0.75 0.13 70);
  --warn-soft:oklch(0.96 0.035 70);
  --warn-ink:oklch(0.44 0.1 60);
}

body{
  font-family:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

/* ===== Layout ===== */
.wrap{max-width:960px;margin:0 auto;padding:0 32px;}
.wrap.wrap-narrow{max-width:820px;}
.section{padding:96px 0;}
.section-alt{background:var(--bg);border-top:1px solid var(--border);}
.section-deep{background:var(--surface-deep);color:var(--white);}
.eyebrow{font-size:16px;font-weight:700;letter-spacing:.09em;color:var(--accent);text-transform:uppercase;}
.section-deep .eyebrow{color:var(--accent-soft-2);}
.h2{font-size:42px;font-weight:800;letter-spacing:-.02em;margin-top:12px;line-height:1.25;}
.lead{font-size:16.5px;color:var(--ink-soft);margin-top:20px;max-width:680px;line-height:1.85;}
.stat-num{font-size:60px;font-weight:900;letter-spacing:-.03em;color:var(--accent);line-height:1;}
.stat-num-compact{font-size:36px;line-height:60px;color:var(--accent-2);}
.card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:28px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;font-size:15px;font-weight:700;border-radius:999px;border:1px solid transparent;cursor:pointer;font-family:inherit;}
.btn-primary{background:var(--accent);color:var(--white);}
.btn-primary:hover{background:var(--surface-deep-2);text-decoration:none;}
.btn-outline-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55);}
.btn-outline-light:hover{border-color:#fff;text-decoration:none;background:rgba(255,255,255,.08);}
.btn-outline{background:transparent;color:var(--accent);border-color:var(--accent);}
.btn-outline:hover{background:var(--accent-pale);text-decoration:none;}

/* ===== Small components ===== */
.badge-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:16px;background:var(--accent-soft);color:var(--accent);flex-shrink:0;}
.icon-circle{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:var(--accent-soft);color:var(--accent);flex-shrink:0;}
.step-num{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;}
.placeholder{display:inline-block;border:1px dashed var(--warn);background:var(--warn-soft);color:var(--warn-ink);padding:3px 9px;border-radius:16px;font-size:13px;font-weight:500;}
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:16px;}
.table-wrap table{min-width:760px;}
.table-wrap table[style*="min-width:0"]{min-width:0;}
.faq-item{border-bottom:1px solid var(--border);padding:22px 0;}
.faq-q{display:flex;align-items:flex-start;gap:12px;font-weight:700;font-size:16px;}
.faq-a{margin-top:12px;margin-left:40px;color:var(--ink-soft);font-size:15px;line-height:1.85;}
.divider{height:1px;background:var(--border);}
.sp-br,.scroll-hint{display:none;}

/* ===== Header / mobile nav ===== */
.site-header{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--border);}
.nav-toggle{display:none;}
.mobile-menu{border-top:1px solid var(--border);padding:20px 20px 24px;display:flex;flex-direction:column;gap:18px;background:var(--white);}
[hidden]{display:none !important;}

/* ===== Responsive ===== */
@media (max-width:900px){
  .nav-desktop{display:none !important;}
  .nav-toggle{display:flex !important;}
  .grid-2{grid-template-columns:1fr !important;}
  .grid-3{grid-template-columns:1fr !important;}
  .grid-4{grid-template-columns:repeat(2,1fr) !important;}
  .h2{font-size:30px !important;}
  .stat-num{font-size:44px !important;}
  .stat-num-compact{font-size:44px !important;line-height:44px !important;}
  .stats-row{flex-direction:column !important;}
  .stats-divider{display:none !important;}
  .section{padding:64px 0 !important;}
  .wrap{padding:0 20px !important;}
  .flow-diagram{flex-direction:column !important;}
  .flow-arrow{transform:rotate(90deg);}
  .float-photo{float:none !important; width:100% !important; height:200px !important; margin:0 0 16px 0 !important;}
  .hero{aspect-ratio:auto !important; min-height:0 !important;}
  .hero .wrap{height:auto !important; padding:56px 20px 28px !important;}
  .hero-cta{position:relative !important; bottom:auto !important; padding:0 20px 48px !important;}
  .sp-br{display:inline;}
  .sp-hide{display:none;}
  .sec-pain{padding-bottom:44px !important;}
  .sec-solve{padding-top:0 !important; display:flow-root;}
  .faq-a{margin-left:28px;}
  .solve-icon{width:36px !important; height:36px !important; border-radius:12px !important;}
  .solve-icon svg{width:20px; height:20px;}
  .flow-title{font-size:21px !important; padding-top:2px !important; text-align:center; flex:1;}
  .flow-title .t-arrow{display:block; font-size:0; line-height:0; margin:8px 0 !important; text-align:center;}
  .flow-title .t-arrow::after{content:"\2193"; font-size:21px; line-height:1;}
  .scroll-hint{display:block; margin-top:20px; font-size:13px; font-weight:700; color:var(--accent); text-align:center;}
  .scroll-hint + .table-wrap{margin-top:8px !important;}
  .case-label{font-size:16px !important; text-align:center;}
  .cta-actions{flex-direction:column; align-items:center; width:100%;}
}
@media (max-width:560px){
  .grid-4{grid-template-columns:1fr !important;}
  .hero h1{font-size:30px !important;}
  td, th{font-size:13.5px !important; padding:11px 12px !important;}
  .table-company td:first-child{width:88px !important;}
}
