/* Freeborn shared stylesheet — extracted from index.html (source of truth for subpages) */
:root{
  --bg:#ffffff;--bg-soft:#f5f7fb;--bg-soft2:#eef2f8;--panel:#ffffff;
  --line:#e4e9f2;--line-2:#d7deeb;
  --navy:#0d2a4d;--navy-2:#12386a;--txt:#132238;--muted:#5a6b82;--muted-2:#606f85;
  --brand:#1667d6;--brand-soft:#e8f1ff;--accent:#0bb69b;--accent-soft:#e6f8f4;--accent-ink:#077263;
  --shadow:0 8px 30px rgba(16,40,73,.08);--shadow-sm:0 2px 12px rgba(16,40,73,.06);
  --radius:16px;--maxw:1180px;--ink:#0d2a4d;--nav-bg:rgba(255,255,255,.92);
  --font-jp:"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Lenis drives the scroll itself; two smooth animations for one gesture fight
   each other. The rule above stays as the fallback for no-JS and for reduced
   motion, where smooth.js deliberately does not start. */
html.lenis{scroll-behavior:auto}
body{font-family:var(--font-jp);background:var(--bg);color:var(--txt);line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--brand);color:#fff}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brand);font-weight:700;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--brand);display:inline-block}
.sec-title{font-size:clamp(1.6rem,3.6vw,2.4rem);font-weight:800;line-height:1.3;margin:14px 0 16px;color:var(--navy);letter-spacing:.01em}
.sec-lead{color:var(--muted);max-width:640px;font-size:1.02rem}
section{position:relative;padding:100px 0}
.alt{background:var(--bg-soft)}

/* Nav */
header.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(12px);transition:.3s;border-bottom:1px solid transparent}
header.nav.scrolled{border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.02em;color:var(--navy)}
.brand .logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--ink),var(--brand));display:grid;place-items:center;color:#fff;font-weight:900;font-size:1.1rem}
.brand small{display:block;font-size:.6rem;letter-spacing:.2em;color:var(--muted-2);font-weight:600}
.nav-links{display:flex;gap:30px;align-items:center;font-size:.92rem}
.nav-links a{color:var(--muted);transition:.2s;position:relative;font-weight:600}
.nav-links a:hover{color:var(--navy)}
.nav-links a.plain::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--brand);transition:.25s}
.nav-links a.plain:hover::after{width:100%}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:8px;font-weight:700;font-size:.9rem;transition:.25s;cursor:pointer;border:none}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 6px 18px rgba(22,103,214,.25)}
.btn-primary:hover{background:var(--navy-2);transform:translateY(-2px);box-shadow:0 10px 26px rgba(22,103,214,.32)}
.btn-ghost{border:1px solid var(--line-2);color:var(--navy);background:var(--panel)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none}
.burger span{width:24px;height:2px;background:var(--navy);transition:.3s}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;min-width:0;overflow-wrap:anywhere;box-shadow:var(--shadow-sm);transition:.25s}
.stat:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.stat .num{font-size:2.5rem;font-weight:900;color:var(--brand);line-height:1}
.stat .lbl{color:var(--muted);margin-top:10px;font-size:.9rem}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;transition:.28s;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--line-2)}
.card:hover .ic{background:var(--ink);color:#fff}
.card .ic{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;background:var(--brand-soft);color:var(--brand);transition:.28s;margin-bottom:20px}
.card h3{font-size:1.16rem;font-weight:800;margin-bottom:12px;color:var(--navy)}
.card p{color:var(--muted);font-size:.94rem}
.card .tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.card .tags span{font-size:.72rem;color:var(--brand);border:1px solid var(--line-2);padding:4px 11px;border-radius:999px;background:var(--bg-soft)}
.card .more{margin-top:auto;padding-top:18px;color:var(--brand);font-weight:700;font-size:.88rem;display:inline-flex;align-items:center;gap:6px;transition:.2s}
.card:hover .more{gap:12px}

/* CTA */
.cta{background:linear-gradient(135deg,var(--ink),var(--navy-2));border-radius:22px;padding:64px 40px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.cta::before{content:"";position:absolute;top:-40%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(22,103,214,.4),transparent 60%)}
.cta h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:900;margin-bottom:14px;color:#fff;position:relative}
.cta p{color:#c3d4ec;max-width:540px;margin:0 auto 30px;position:relative}
.cta .eyebrow{color:#7fb0ff;justify-content:center}
.cta .eyebrow::before{background:#7fb0ff}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
.cta .btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.cta .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

/* Footer */
footer{border-top:1px solid var(--line);padding:56px 0 30px;background:var(--bg-soft)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
footer h3{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px;font-weight:800}
footer a{color:var(--muted);display:block;padding:5px 0;transition:.2s;font-size:.92rem}
footer a:hover{color:var(--brand)}
.foot-bottom{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted-2);font-size:.82rem;flex-wrap:wrap;gap:12px}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ====== DETAIL PAGE ====== */
.detail-hero{padding:150px 0 80px;background:radial-gradient(1000px 500px at 85% -20%,#eef4ff,transparent 60%),linear-gradient(180deg,#fbfcfe,#fff)}
.crumb{font-size:.84rem;color:var(--muted-2);margin-bottom:18px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--muted);font-weight:600}
.crumb a:hover{color:var(--brand)}
.crumb .sep{color:var(--line-2)}
.dh-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.dh-ic{width:70px;height:70px;border-radius:18px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:2rem;margin-bottom:22px}
.detail-hero h1{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:900;color:var(--navy);line-height:1.25}
.detail-hero .lead{margin-top:20px;color:var(--muted);font-size:1.1rem;max-width:520px}
.dh-cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.dh-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.dh-card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--ink),var(--brand),var(--accent))}
.dh-card h2{color:var(--navy);font-size:1rem;margin-bottom:16px}
.dh-card ul{list-style:none;display:grid;gap:12px}
.dh-card li{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;color:var(--txt)}
.dh-card li::before{content:"✓";color:var(--accent);font-weight:900;flex-shrink:0}

.lead-block{max-width:760px}
.lead-block p{color:var(--muted);font-size:1.05rem;margin-top:16px}

/* feature grid */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;box-shadow:var(--shadow-sm);transition:.25s}
.feat:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.feat .fic{width:50px;height:50px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:1.3rem;margin-bottom:16px;font-weight:900}
.feat h3{color:var(--navy);font-size:1.08rem;margin-bottom:10px}
.feat p{color:var(--muted);font-size:.92rem}

/* process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px;counter-reset:step}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;position:relative;box-shadow:var(--shadow-sm)}
.step .no{width:40px;height:40px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:900;margin-bottom:16px}
.step h3{color:var(--navy);font-size:1.02rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.88rem}

/* two-col list */
.usecase{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
.uc{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:12px;padding:22px 24px;box-shadow:var(--shadow-sm)}
.uc h3{color:var(--navy);font-size:1rem;margin-bottom:6px}
.uc p{color:var(--muted);font-size:.9rem}

/* spec table */
.spec{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:44px;box-shadow:var(--shadow-sm)}
.spec .row{display:grid;grid-template-columns:220px 1fr;border-top:1px solid var(--line)}
.spec .row:first-child{border-top:none}
.spec .k{padding:18px 26px;background:var(--bg-soft);color:var(--navy);font-weight:700;font-size:.92rem}
.spec .v{padding:18px 26px;color:var(--txt);font-size:.94rem}

/* faq */
.faq{margin-top:44px;display:grid;gap:14px}
.qa{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px 26px;box-shadow:var(--shadow-sm)}
.qa h3{color:var(--navy);font-size:1rem;display:flex;gap:10px}
.qa h3::before{content:"Q";color:var(--brand);font-weight:900}
.qa p{color:var(--muted);font-size:.92rem;margin-top:8px;padding-left:22px}

/* related */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.rel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:var(--shadow-sm);transition:.25s;display:block}
.rel:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:var(--line-2)}
.rel .ric{font-size:1.6rem;margin-bottom:12px}
.rel h3{color:var(--navy);font-size:1rem;margin-bottom:6px}
.rel p{color:var(--muted);font-size:.85rem}

@media(max-width:960px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:1fr 1fr}
  .dh-grid{grid-template-columns:1fr;gap:40px}
  .feat-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .related{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .nav-links{position:fixed;inset:74px 0 auto 0;background:var(--panel);flex-direction:column;padding:24px;gap:18px;transform:translateY(-130%);transition:.35s;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .nav-links.open{transform:none}
  .nav-links .btn{width:100%;justify-content:center}
  .burger{display:flex}
  .cards,.feat-grid,.steps,.usecase{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr}
  .spec .row{grid-template-columns:1fr}.spec .k{padding-bottom:0}
  section{padding:76px 0}
}

/* ====== AI SNS IO (AI products) ====== */
:root{--ai:#6d3bef;--ai-2:#a855f7;--ai-soft:#f1ebff;--ai-soft2:#f4efff}
.badge-ai{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--ai),var(--ai-2));padding:6px 14px;border-radius:999px;box-shadow:0 6px 18px rgba(109,59,239,.3)}
.ai-eyebrow{color:var(--ai)}
.ai-eyebrow::before{background:var(--ai)}
.ai-section{background:linear-gradient(180deg,#faf8ff,#fff)}
.ai-hero{background:radial-gradient(1000px 520px at 85% -20%,#efe8ff,transparent 60%),linear-gradient(180deg,#fbf9ff,#fff)}
.ai-ic{background:linear-gradient(135deg,var(--ai-soft2),#e9e0ff)!important;color:var(--ai)!important}
.card.ai:hover .ic{background:linear-gradient(135deg,var(--ai),var(--ai-2))!important;color:#fff!important}
.card.ai .ic{background:linear-gradient(135deg,#f1ebff,#e7dcff);color:var(--ai)}
.card.ai .tags span{color:var(--ai);background:#f6f2ff}
.card.ai .more{color:var(--ai)}
.dh-ic.ai{background:linear-gradient(135deg,#f1ebff,#e7dcff);color:var(--ai)}
.dh-card.ai::before{background:linear-gradient(90deg,var(--ai),var(--ai-2))}
.dh-card.ai li::before{color:var(--ai)}
.feat.ai .fic{background:#f1ebff;color:var(--ai)}
.step.ai .no{background:linear-gradient(135deg,var(--ai),var(--ai-2))}
.uc.ai{border-left-color:var(--ai)}
.qa.ai h3::before{color:var(--ai)}
.btn-ai{background:linear-gradient(135deg,var(--ai),var(--ai-2));color:#fff;box-shadow:0 6px 18px rgba(109,59,239,.28)}
.btn-ai:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(109,59,239,.36);color:#fff}
.ai-cta{background:linear-gradient(135deg,#3a1d7a,#6d3bef)!important}
.ai-cta::before{background:radial-gradient(circle,rgba(168,85,247,.5),transparent 60%)!important}
.prod-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.prod-strip a{font-size:.82rem;font-weight:700;color:var(--ai);background:#f4efff;border:1px solid #e7dcff;padding:8px 14px;border-radius:999px;transition:.2s}
.prod-strip a:hover{background:var(--ai);color:#fff}
.hero{min-height:92vh;display:flex;align-items:center;padding-top:90px;background:radial-gradient(1200px 600px at 80% -10%,#eef4ff 0%,transparent 60%),linear-gradient(180deg,#fbfcfe,#fff)}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;width:100%}
  .hero h1{font-size:clamp(2.1rem,4.8vw,3.6rem);line-height:1.22;font-weight:900;color:var(--navy)}
  .hero h1 .grad{color:var(--brand)}
  .hero p.lead{margin-top:24px;font-size:1.1rem;color:var(--muted);max-width:520px}
  .hero-cta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
  .pill-row{margin-top:36px;display:flex;gap:10px;flex-wrap:wrap}
  .pill{font-size:.82rem;padding:9px 15px;border-radius:8px;border:1px solid var(--line);color:var(--muted);background:var(--panel);box-shadow:var(--shadow-sm)}
  .pill b{color:var(--brand)}
  .hv-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:30px;position:relative;overflow:hidden}
  .hv-card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--ink),var(--brand),var(--accent))}
  .hv-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
  .hv-head b{color:var(--navy);font-size:1.05rem}
  .hv-head span{font-size:.72rem;color:var(--accent-ink);font-weight:700;background:var(--accent-soft);padding:4px 10px;border-radius:999px}
  .hv-list{display:grid;gap:12px}
  .hv-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft);transition:.25s}
  .hv-row:hover{background:var(--panel);box-shadow:var(--shadow-sm);border-color:var(--line-2);transform:translateX(4px)}
  .hv-ic{width:40px;height:40px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:1.2rem;flex-shrink:0}
  .hv-row .t{font-weight:700;color:var(--navy);font-size:.95rem}
  .hv-row .d{font-size:.78rem;color:var(--muted-2)}
  .hv-badge{position:absolute;right:-14px;bottom:-14px;background:var(--ink);color:#fff;border-radius:14px;padding:16px 20px;box-shadow:var(--shadow);text-align:center}
  .hv-badge b{font-size:1.5rem;display:block;line-height:1}
  .hv-badge small{font-size:.68rem;color:#a9c2e6}
  .trust{background:var(--ink);color:#fff;padding:22px 0}
  .trust-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 40px;font-weight:700;font-size:.98rem}
  .trust-inner span{opacity:.92;display:inline-flex;align-items:center;gap:10px}
  .trust-inner .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  .value-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:30px}
  .value{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:var(--shadow-sm)}
  .value h3{color:var(--navy);font-size:1rem;margin-bottom:6px;display:flex;align-items:center;gap:8px}
  .value h3 i{color:var(--brand);font-style:normal}
  .value p{color:var(--muted);font-size:.86rem}
  .quote{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:14px;padding:32px;box-shadow:var(--shadow-sm)}
  .quote p{font-size:1.04rem;line-height:1.95}
  .quote .who{margin-top:18px;color:var(--muted);font-size:.88rem;font-weight:600}
  .timeline{position:relative;margin-top:48px;padding-left:20px}
  .timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line-2)}
  .tl-item{position:relative;padding:0 0 32px 34px}
  .tl-item::before{content:"";position:absolute;left:-1px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--panel);border:3px solid var(--brand)}
  .tl-item .yr{font-weight:800;color:var(--brand);font-size:.9rem}
  .tl-item p{color:var(--muted);margin-top:2px}
  .loc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
  .loc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);transition:.25s}
  .loc:hover{box-shadow:var(--shadow)}
  .loc .tag{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);font-weight:800}
  .loc h3{font-size:1.12rem;margin:8px 0 10px;color:var(--navy)}
  .loc p{color:var(--muted);font-size:.9rem}
  .profile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:44px;box-shadow:var(--shadow-sm)}
  .profile .row{display:grid;grid-template-columns:210px 1fr;border-top:1px solid var(--line)}
  .profile .row:first-child{border-top:none}
  .profile .row .k{padding:18px 26px;background:var(--bg-soft);color:var(--navy);font-weight:700;font-size:.92rem}
  .profile .row .v{padding:18px 26px;color:var(--txt);font-size:.94rem}
  @media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:40px}.split{grid-template-columns:1fr;gap:36px}}
  @media(max-width:640px){.profile .row{grid-template-columns:1fr}.profile .row .k{padding-bottom:0}.loc-grid{grid-template-columns:1fr}}

/* ====== ADDED FOR SUBPAGES: pricing, forms, tables ====== */

/* pricing tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px;align-items:stretch}
.tier{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:34px 28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:.25s;position:relative}
.tier:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.tier.featured{border-color:var(--brand);box-shadow:0 14px 40px rgba(22,103,214,.16)}
.tier.featured::before{content:"人気";position:absolute;top:-12px;left:28px;background:var(--brand);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.1em;padding:5px 14px;border-radius:999px}
.tier.ai.featured{border-color:var(--ai);box-shadow:0 14px 40px rgba(109,59,239,.18)}
.tier.ai.featured::before{background:linear-gradient(135deg,var(--ai),var(--ai-2))}
.tier .tname{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);font-weight:800}
.tier.ai .tname{color:var(--ai)}
.tier .tprice{font-size:2.1rem;font-weight:900;color:var(--navy);line-height:1.1;margin:12px 0 4px}
.tier .tprice small{font-size:.9rem;font-weight:700;color:var(--muted)}
.tier .tnote{font-size:.82rem;color:var(--muted-2)}
.tier .tdesc{color:var(--muted);font-size:.92rem;margin:16px 0 18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.tier ul{list-style:none;display:grid;gap:10px}
.tier li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--txt)}
.tier li::before{content:"✓";color:var(--accent);font-weight:900;flex-shrink:0}
.tier li.off{color:var(--muted-2)}
.tier li.off::before{content:"—";color:var(--line-2)}
.tier .tcta{margin-top:auto;padding-top:24px}
.tier .tcta .btn{width:100%;justify-content:center}

/* price table */
.ptable{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:44px;box-shadow:var(--shadow-sm)}
.ptable table{width:100%;border-collapse:collapse}
.ptable th,.ptable td{padding:16px 22px;text-align:left;font-size:.93rem;border-top:1px solid var(--line);vertical-align:top}
.ptable thead th{background:var(--ink);color:#fff;font-size:.84rem;letter-spacing:.06em;border-top:none;font-weight:800}
.ptable tbody tr:hover{background:var(--bg-soft)}
.ptable td.num{font-weight:800;color:var(--navy);white-space:nowrap}
.ptable td.num small{font-weight:600;color:var(--muted);font-size:.8rem}
.ptable-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ptable-scroll table{min-width:640px}

/* model / note blocks */
.model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.model{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--brand);border-radius:14px;padding:26px 24px;box-shadow:var(--shadow-sm)}
.model.ai{border-top-color:var(--ai)}
.model h3{color:var(--navy);font-size:1.02rem;margin-bottom:10px}
.model p{color:var(--muted);font-size:.9rem}
.model .kpi{font-size:1.5rem;font-weight:900;color:var(--brand);line-height:1;margin-bottom:8px}
.model.ai .kpi{color:var(--ai)}
.note{margin-top:26px;background:var(--bg-soft);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:18px 22px;color:var(--muted);font-size:.88rem}
.note b{color:var(--navy)}

/* section nav (in-page anchors on subpages) */
.pagenav{position:sticky;top:74px;z-index:20;background:var(--nav-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.pagenav-inner{display:flex;gap:26px;overflow-x:auto;height:54px;align-items:center;font-size:.88rem;font-weight:700;white-space:nowrap;scrollbar-width:none}
.pagenav-inner::-webkit-scrollbar{display:none}
.pagenav a{color:var(--muted);transition:.2s}
.pagenav a:hover{color:var(--brand)}

/* forms */
.form-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:36px;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.86rem;font-weight:700;color:var(--navy)}
.field label .req{color:#d64545;font-size:.74rem;margin-left:6px;font-weight:800}
.field label .opt{color:var(--muted-2);font-size:.74rem;margin-left:6px;font-weight:700}
.field input,.field select,.field textarea{font-family:inherit;font-size:.95rem;color:var(--txt);background:var(--panel);border:1px solid var(--line-2);border-radius:10px;padding:13px 14px;transition:.2s;width:100%}
.field textarea{min-height:140px;resize:vertical;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,103,214,.14)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#d64545;box-shadow:0 0 0 3px rgba(214,69,69,.12)}
.field .err{color:#d64545;font-size:.78rem;min-height:1em}
.field .hint{color:var(--muted-2);font-size:.78rem}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--muted)}
.check input{width:18px;height:18px;flex-shrink:0;margin-top:3px;accent-color:var(--brand)}
.check a{color:var(--brand);font-weight:700;text-decoration:underline}
.form-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:26px}
.form-actions .btn{min-width:200px;justify-content:center}
.form-actions .btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.form-msg{margin-top:18px;border-radius:12px;padding:16px 20px;font-size:.92rem;display:none}
.form-msg.show{display:block}
.form-msg.ok{background:var(--accent-soft);border:1px solid #b6e8dd;color:#0a6d5d}
.form-msg.ng{background:#fdecec;border:1px solid #f6c9c9;color:#a02b2b}
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:start}
.contact-side{display:grid;gap:16px}
.cside{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:var(--shadow-sm)}
.cside h3{color:var(--navy);font-size:1rem;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.cside p{color:var(--muted);font-size:.88rem}
.cside .big{font-size:1.4rem;font-weight:900;color:var(--brand);display:block;margin:4px 0}

@media(max-width:960px){
  .tiers{grid-template-columns:1fr}
  .model-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:30px}
}
@media(max-width:720px){
  .form-grid{grid-template-columns:1fr}
  .form-card{padding:24px 20px}
  .pagenav{top:0}
}

/* footer legal block */
.foot-legal{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted-2);font-size:.82rem;line-height:1.9}
.foot-legal b{display:block;color:var(--navy);font-size:.9rem;letter-spacing:.02em}
.foot-legal span{display:block}

/* language switcher */
.langsel{position:relative}
.langsel select{appearance:none;font-family:inherit;font-size:.84rem;font-weight:700;color:var(--muted);background:var(--panel);border:1px solid var(--line-2);border-radius:8px;padding:9px 30px 9px 12px;cursor:pointer;transition:.2s}
.langsel select:hover{border-color:var(--brand);color:var(--brand)}
.langsel select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,103,214,.14)}
.langsel::after{content:"▾";position:absolute;right:11px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted-2);font-size:.7rem}
@media(max-width:720px){.langsel select{width:100%}}

/* ====== FIXES ====== */
/* nav CTA text must stay white — .nav-links a{color:var(--muted)} was beating .btn-primary */
.nav-links a.btn-primary,.nav-links a.btn-primary:hover,.nav-links a.btn-ai,.nav-links a.btn-ai:hover{color:#fff}
.cta .btn-primary,.cta .btn-primary:hover{color:#fff}
footer a.btn-primary{color:#fff}

/* ====== DARK MODE ====== */
:root{color-scheme:light}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b1220;--bg-soft:#101a2c;--bg-soft2:#152039;--panel:#131e33;
  --line:#243250;--line-2:#31415f;
  --navy:#e9f0fb;--navy-2:#1b4f95;--txt:#dde6f4;--muted:#a4b5cd;--muted-2:#7f90aa;
  --brand:#5aa2ff;--brand-soft:#16294a;--accent:#2fd3b5;--accent-soft:#0f2f2b;--accent-ink:#2fd3b5;
  --shadow:0 10px 34px rgba(0,0,0,.5);--shadow-sm:0 2px 14px rgba(0,0,0,.35);
  --nav-bg:rgba(11,18,32,.9);
  --ai:#a084ff;--ai-2:#c39bff;--ai-soft:#1e1a3a;--ai-soft2:#221c40;
}
:root[data-theme="dark"] body{background:var(--bg)}
:root[data-theme="dark"] .hero{background:radial-gradient(1200px 600px at 80% -10%,#15254a 0%,transparent 60%),linear-gradient(180deg,#0d1626,#0b1220)}
:root[data-theme="dark"] .detail-hero{background:radial-gradient(1000px 500px at 85% -20%,#15254a,transparent 60%),linear-gradient(180deg,#0d1626,#0b1220)}
:root[data-theme="dark"] .ai-hero{background:radial-gradient(1000px 520px at 85% -20%,#241d47,transparent 60%),linear-gradient(180deg,#0e1024,#0b1220)}
:root[data-theme="dark"] .ai-section{background:linear-gradient(180deg,#0f1128,#0b1220)}
:root[data-theme="dark"] .card.ai .ic,:root[data-theme="dark"] .dh-ic.ai{background:linear-gradient(135deg,#241c46,#2e2258);color:var(--ai)}
:root[data-theme="dark"] .card.ai .tags span{background:#1d1838;border-color:#2e2657}
:root[data-theme="dark"] .prod-strip a{background:#1d1838;border-color:#2e2657;color:var(--ai)}
:root[data-theme="dark"] .badge-ai{box-shadow:0 6px 18px rgba(109,59,239,.45)}
:root[data-theme="dark"] .btn-ghost{background:var(--panel)}
:root[data-theme="dark"] .cta .btn-ghost{background:transparent}
:root[data-theme="dark"] .cta{background:linear-gradient(135deg,#0f2647,#1b4f95)}
:root[data-theme="dark"] .ai-cta{background:linear-gradient(135deg,#241a52,#5a35c9)!important}
:root[data-theme="dark"] .trust{background:#0a1526}
:root[data-theme="dark"] .ptable thead th{background:#0f2038}
:root[data-theme="dark"] .ptable tbody tr:hover{background:#16233c}
:root[data-theme="dark"] .spec .k,:root[data-theme="dark"] .profile .row .k{background:#16223a}
:root[data-theme="dark"] .hv-row{background:#16223a}
:root[data-theme="dark"] .hv-row:hover{background:#1a294a}
:root[data-theme="dark"] .hv-badge{background:#0f2038}
:root[data-theme="dark"] .step .no{background:#1b4f95}
:root[data-theme="dark"] .card:hover .ic{background:var(--brand);color:#0b1220}
:root[data-theme="dark"] .field input,:root[data-theme="dark"] .field select,:root[data-theme="dark"] .field textarea{background:#0f1a2e;color:var(--txt);border-color:var(--line-2)}
:root[data-theme="dark"] .field input::placeholder,:root[data-theme="dark"] .field textarea::placeholder{color:#66768f}
:root[data-theme="dark"] .form-msg.ok{background:#0f2f2b;border-color:#1d5a4f;color:#6ce0c6}
:root[data-theme="dark"] .form-msg.ng{background:#3a1717;border-color:#6b2a2a;color:#ff9c9c}
:root[data-theme="dark"] .note{background:#101d33}
:root[data-theme="dark"] .langsel select,:root[data-theme="dark"] .themetoggle{background:var(--panel);color:var(--muted)}
:root[data-theme="dark"] .tier.featured{box-shadow:0 14px 40px rgba(90,162,255,.18)}
:root[data-theme="dark"] .quote p strong{color:var(--brand)!important}
:root[data-theme="dark"] img,:root[data-theme="dark"] .value h3 i{opacity:.95}

/* theme toggle button */
.themetoggle{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:8px;border:1px solid var(--line-2);background:var(--panel);color:var(--muted);cursor:pointer;font-size:1rem;transition:.2s;flex-shrink:0}
.themetoggle:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.themetoggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.nav-extra{display:flex;align-items:center;gap:10px}
@media(max-width:720px){.nav-extra{width:100%;justify-content:space-between}}

/* ── "GO TO WEB" — jump from an explanation page to the live product site ── */
.btn-web{
  background:linear-gradient(120deg,#0d2a4d,#1667d6);color:#fff;border:none;
  box-shadow:0 8px 22px rgba(22,103,214,.3);letter-spacing:.06em;font-weight:800;
  position:relative;overflow:hidden;
}
.btn-web::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);
  transform:translateX(-120%);animation:webSheen 4.6s ease-in-out infinite;
}
.btn-web:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(22,103,214,.42);color:#fff}
.btn-web .ext{font-size:.9em;opacity:.85}
@keyframes webSheen{18%,100%{transform:translateX(120%)}0%{transform:translateX(-120%)}}
:root[data-theme="dark"] .btn-web{background:linear-gradient(120deg,#1b4f95,#5aa2ff);color:#07101f}
:root[data-theme="dark"] .btn-web:hover{color:#07101f}
.ai-cta .btn-web,.dh-cta .btn-web{white-space:nowrap}
@media (prefers-reduced-motion:reduce){.btn-web::after{animation:none;display:none}}

/* live-site strip shown under a product hero */
.live-strip{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;
  box-shadow:var(--shadow-sm);font-size:.86rem;color:var(--muted);
}
.live-strip .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent);animation:lsPulse 2.4s infinite}
@keyframes lsPulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.live-strip code{font:600 .8rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--navy);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;padding:5px 9px}
.live-strip a.go{margin-left:auto;font-weight:800;color:var(--brand);white-space:nowrap}
.live-strip a.go:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.live-strip .dot{animation:none}}

/* footnote under a pricing tier grid — the details that do not fit on a card */
.price-note{
  margin-top:18px;font-size:.84rem;line-height:1.85;color:var(--muted);
  background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:0 10px 10px 0;padding:14px 18px;
}
.price-note a{color:var(--brand);font-weight:700}
.price-note a:hover{text-decoration:underline}

/* ── OUR FLEET band on the home page ─────────────────────────────────────── */
.fleet-band{
  position:relative;overflow:hidden;padding:92px 0;color:#e9f1fb;
  background:radial-gradient(900px 460px at 84% -10%,#1d3f7c 0%,transparent 62%),
             radial-gradient(700px 420px at 4% 108%,#221f5c 0%,transparent 60%),
             linear-gradient(180deg,#0c1a30,#0a1424);
}
.fleet-band .eyebrow{color:#7fb4ff}
.fleet-band .eyebrow::before{background:#7fb4ff}
.fleet-band h2{font-size:clamp(1.7rem,4vw,2.6rem);font-weight:900;line-height:1.28;margin:14px 0 14px;color:#fff}
.fleet-band h2 .grad{background:linear-gradient(100deg,#7fb4ff,#8ef2d6 52%,#c2a4ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.fleet-band p.lead{color:#a9bdd8;max-width:640px;font-size:1.02rem}
.fb-top{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap}
.fb-actions{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.fb-actions .btn-ghost{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:#eaf1fb}
.fb-actions .btn-ghost:hover{border-color:#7fb4ff;color:#bcd8ff}

.fb-rail{
  display:flex;gap:16px;margin-top:38px;padding:4px 24px 18px;overflow-x:auto;
  scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#31456a transparent;
}
.fb-rail::-webkit-scrollbar{height:7px}
.fb-rail::-webkit-scrollbar-thumb{background:#31456a;border-radius:99px}
.fb-tile{
  flex:0 0 232px;scroll-snap-align:start;border-radius:13px;overflow:hidden;position:relative;
  background:#10192b;border:1px solid rgba(255,255,255,.12);transition:.28s cubic-bezier(.2,.7,.3,1);
}
.fb-tile:hover{transform:translateY(-6px);border-color:var(--acc,#7fb4ff);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.fb-shot{height:132px;overflow:hidden;position:relative;background:#0d1626}
.fb-shot img{width:100%;display:block;transition:transform 3.4s cubic-bezier(.2,.6,.3,1);transform-origin:top center}
.fb-tile:hover .fb-shot img{transform:translateY(-42%)}
.fb-shot::after{content:"";position:absolute;inset:auto 0 0 0;height:44px;background:linear-gradient(180deg,transparent,#10192b)}
.fb-meta{padding:12px 14px 14px}
.fb-meta b{display:block;font-size:.88rem;font-weight:800;color:#eaf1fb;line-height:1.35}
.fb-meta span{display:block;font-size:.75rem;color:#8fa5c2;margin-top:3px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fb-more{
  flex:0 0 232px;scroll-snap-align:start;border-radius:13px;display:grid;place-content:center;gap:8px;text-align:center;
  border:1px dashed rgba(255,255,255,.26);color:#bcd8ff;font-weight:800;transition:.25s;padding:20px;
}
.fb-more:hover{border-color:#7fb4ff;background:rgba(127,180,255,.08)}
.fb-more b{font-size:1.5rem;display:block}
.fb-more span{font-size:.78rem;color:#8fa5c2;font-weight:600}
@media (max-width:700px){
  .fleet-band{padding:70px 0}
  .fb-rail{padding-left:20px;padding-right:20px}
  .fb-tile,.fb-more{flex-basis:200px}
}
@media (prefers-reduced-motion:reduce){
  .fb-shot img{transition:none}
  .fb-tile:hover .fb-shot img{transform:none}
}

/* ── Touch and small screens ──────────────────────────────────────────────────
   Measured on a 375px phone before writing any of this: no horizontal overflow
   anywhere, which is the failure that actually ruins a page, so this is about
   the two things that were wrong rather than a rebuild.

   1. Tap targets. The hamburger was 24x16 — the primary navigation control on a
      phone, a third of the 44px Apple asks for and half of Google's 48. The
      theme toggle was 38x38, the language picker 34 tall, and the menu links 36.
   2. Text. 66 tag chips at 11.5px and the rail captions at 12px are real
      content being read on a small screen.

   What is deliberately NOT touched: the tiny type inside the card previews —
   .scr, .scr-body and the rest. Those are drawings of a user interface at
   reduced scale, and 7-9px is what makes them read as screenshots rather than
   as text. Enlarging them would break the illusion and the layout with it. */
@media (max-width: 720px) {
  /* a finger is about 9mm; these are the controls it has to hit */
  .burger{width:44px;height:44px;justify-content:center;align-items:center;margin-right:-8px}
  .burger span{width:22px}
  .themetoggle{width:44px;height:44px}
  .langsel select{min-height:44px;padding-top:0;padding-bottom:0}
  .nav-links a,.m-mob a{min-height:44px;display:flex;align-items:center}
  .nav-links .btn,.m-mob .btn{min-height:44px}

  /* real content, not the mock previews.
     .card .tags span is what actually sets these — a bare `.tags span` loses to
     it on specificity and silently does nothing. */
  .card .tags span,.tags span,.feat-txt .tags span{font-size:.78rem;padding:5px 10px}
  footer a{min-height:44px;display:flex;align-items:center;padding:4px 0}
  /* The rest of the controls a finger has to find: the brand mark, the crumb
     links, the live-strip links on a product page, and the filter chips on the
     Fleet page. inline-flex rather than flex so a link inside a line of text
     keeps sitting in the line. */
  .brand{min-height:44px}
  .crumb a,.live-strip a,.go{min-height:44px;display:inline-flex;align-items:center}
  .chip{min-height:44px}
  .foot-legal a,.foot-bottom a{min-height:44px;display:inline-flex;align-items:center}
  /* The in-page section nav on the pricing page: seven links at 25px, which on a
     phone sit close enough together to hit the wrong one. */
  .pagenav a{min-height:44px;display:inline-flex;align-items:center}
  /* The modal close button was 22x22 — the control you reach for in a hurry. */
  #dClose,.br-close,.fx-close,[aria-label="close"],[aria-label="閉じる"]{min-width:44px;min-height:44px}
  .fb-meta span{font-size:.8rem;line-height:1.5}
  .loc .tag{font-size:.75rem}
  .eyebrow{font-size:.8rem}
  .hv-row .d{font-size:.8rem}
}

/* Below about 380px — iPhone SE and the smaller Androids — the same content has
   to fit in 45px less. Only the things that were tight there. */
@media (max-width: 380px) {
  .btn{padding-left:18px;padding-right:18px}
  .nav-inner{gap:8px}
  .brand small{display:none}
}

/* The primary button in dark mode: --brand lightens to #5aa2ff so it stands out
   against a dark page, and white text on it is 2.61:1 — below AA. Dark text on a
   light accent is the conventional dark-theme pairing and measures 7.17:1.
   Only the button; --brand is still the link colour elsewhere. */
:root[data-theme="dark"] .btn-primary{color:#0b1220}
:root[data-theme="dark"] .btn-primary:hover{color:#0b1220}