/* =========================================================
   AlgoTech Studio LP — Early Access 先行登録LP（ホワイト基調）
   Self-contained: does not depend on the app's Tailwind build.
   ページ固有のスタイルシート（index.templ からのみ読み込まれる）。
   デザインモックのCSSをそのまま採用し、以下のみ追加している:
     - .nav-login（ヘッダーのログインボタン。モバイルではメニュー内に集約）
     - header.nav / footer.dark-zone の左右の余白（body の余白の内側で、文字が枠の端に付かないようにする）
   ========================================================= */

  :root{
    --bg:#ffffff; --surface:#f7f7f8; --card:#ffffff; --popover:#f2f2f4; --muted:#f2f2f4;
    --accent-surface:#e5e5e5;
    --border:rgba(0,0,0,0.10); --border-strong:rgba(0,0,0,0.16); --input:rgba(0,0,0,0.20); --ring:#a1a1aa;
    --fg:#0a0a0a; --muted-fg:#525252;
    --primary:#1d4ed8; --primary-hi:#1e40af; --primary-fg:#fafaf9; --primary-soft:rgba(29,78,216,0.07); --primary-soft-strong:rgba(29,78,216,0.14);
    --positive:#047857; --positive-soft:rgba(4,120,87,0.08);
    --negative:#dc2626; --negative-soft:rgba(220,38,38,0.07);
    --caution:#b45309; --caution-soft:rgba(180,83,9,0.08);
    --ai:#4f46e5; --ai-fg:#4338ca; --ai-bg:rgba(79,70,229,0.06); --ai-border:#c7d2fe;
    --link:#1d4ed8; --link-hover:#1e40af;
    --cta:#ea580c; --cta-hi:#c2410c; --cta-fg:#fffaf5;
    --c1:#1d4ed8; --c2:#10b981; --c3:#f59e0b; --c4:#a855f7; --c5:#f43f5e;
    --font-jp:'Noto Sans JP',system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
    --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    --font-brand:'Manrope',var(--font-jp);
    --maxw:1120px;
    color-scheme: light;
  }

  /* Header, footer, mobile-nav dropdown, the hero product-screenshot panel, and the
     mobile sticky CTA bar intentionally stay on the original dark UI palette while
     the rest of the page moves to a light background. */
  header.nav, .mobilepanel, footer.dark-zone, .panel, .sticky-cta{
    --bg:#0a0a0a; --surface:#111111; --card:#171717; --popover:#262626; --muted:#262626;
    --border:rgba(255,255,255,0.10); --border-strong:rgba(255,255,255,0.18); --input:rgba(255,255,255,0.15); --ring:#737373;
    --fg:#fafafa; --muted-fg:#a3a3a3;
    --primary-soft:rgba(29,78,216,0.16); --primary-soft-strong:rgba(29,78,216,0.30);
    --positive:#34d399; --positive-soft:rgba(52,211,153,0.12);
    --negative:#f87171; --negative-soft:rgba(248,113,113,0.12);
    --caution:#fde047; --caution-soft:rgba(253,224,71,0.10);
    --ai:#4f46e5; --ai-bg:rgba(99,102,241,0.10); --ai-border:#312e81;
    --link:#3b82f6; --link-hover:#60a5fa;
  }
  header.nav, .panel{ color:var(--fg); }
  /* body の左右の余白（20px）の内側に入ると、黒い枠の内側に余白がなく、ロゴ・メニューボタン・
     フッターの文字が枠の端で見切れる。画面の端まで広げ、内側に同じ余白を取る。 */
  header.nav, footer.dark-zone{ margin-inline:-20px; padding-inline:20px; }

  *{box-sizing:border-box;}
  html{background:var(--bg);}
  body{
    margin:0; background:var(--bg); color:var(--fg);
    font-family:var(--font-jp); font-weight:400;
    line-height:1.75; -webkit-font-smoothing:antialiased;
    padding-inline:20px;
  }
  img{max-width:100%;}
  a{color:inherit;}
  h1,h2,h3,h4{margin:0; font-weight:900; text-wrap:balance; letter-spacing:0.01em;}
  p{margin:0;}
  ul{margin:0; padding:0; list-style:none;}
  :focus-visible{outline:2px solid var(--link); outline-offset:2px;}
  .tabular{font-variant-numeric:tabular-nums;}

  .wrap{max-width:var(--maxw); margin-inline:auto;}
  .wrap-narrow{max-width:760px; margin-inline:auto;}

  section{border-top:1px solid var(--border); scroll-margin-top:84px;}
  section.no-border{border-top:none;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
  .pad{padding-block:88px;}
  @media (max-width:640px){ .pad{padding-block:56px;} }

  .eyebrow{
    font-family:var(--font-mono); font-size:0.72rem; font-weight:600;
    letter-spacing:0.16em; text-transform:uppercase; color:var(--primary-hi);
    display:flex; align-items:center; gap:10px; margin-bottom:16px;
  }
  .eyebrow::before{content:""; width:18px; height:1px; background:var(--primary-hi); display:inline-block;}

  .h2{font-size:clamp(1.5rem,3.1vw,2.2rem); line-height:1.4;}
  .lede{color:var(--muted-fg); font-size:1.02rem; max-width:640px; margin-top:18px;}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font-jp); font-weight:700; font-size:0.94rem;
    padding:13px 26px; border-radius:6px; border:1px solid transparent;
    cursor:pointer; text-decoration:none; white-space:nowrap; transition:background-color .15s ease, border-color .15s ease, transform .05s ease;
  }
  .btn:active{transform:translateY(1px);}
  .btn-primary{background:var(--cta); color:var(--cta-fg);}
  .btn-primary:hover{background:var(--cta-hi);}
  .btn-ghost{background:transparent; color:var(--fg); border-color:var(--border-strong);}
  .btn-ghost:hover{background:var(--popover);}
  .btn-block{width:100%;}
  .btn-lg{padding:16px 30px; font-size:1rem;}

  /* ---------- nav ---------- */
  header.nav{
    position:sticky; top:0; z-index:40;
    background:rgba(10,10,10,0.85); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .navbar{max-width:var(--maxw); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px;}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); flex-shrink:0;}
  .brand svg{width:22px; height:22px; color:var(--fg);}
  .brand span{font-family:var(--font-brand); font-weight:800; font-size:1.05rem; letter-spacing:-0.01em;}
  .navlinks{display:flex; align-items:center; gap:30px; font-size:0.9rem; color:var(--muted-fg);}
  .navlinks a{text-decoration:none; color:var(--muted-fg); transition:color .15s ease;}
  .navlinks a:hover{color:var(--fg);}
  .navcta{display:flex; align-items:center; gap:14px;}
  .navmenu-toggle{display:none;}
  @media (max-width:860px){
    .navlinks{display:none;}
    .navmenu-toggle{display:block;}
    .nav-login{display:none;} /* モバイルではログインをハンバーガーメニュー内に集約 */
  }
  @media (max-width:420px){
    .navbar{gap:8px;}
    .navcta{gap:8px;}
    .navcta .btn-primary{padding:9px 14px; font-size:0.8rem;}
    .brand span{font-size:0.94rem;}
  }
  @media (max-width:380px){
    .brand{gap:6px;}
    .brand svg{width:18px; height:18px;}
    .brand span{font-size:0.84rem;}
    .navcta .btn-primary{padding:8px 10px; font-size:0.74rem;}
    details.mobilenav summary{padding:6px;}
  }
  @media (max-width:340px){
    .navbar{gap:4px;}
    .brand{gap:5px;}
    .brand span{font-size:0.76rem; letter-spacing:-0.02em;}
    .navcta{gap:5px;}
    .navcta .btn-primary{padding:7px 8px !important; font-size:0.68rem !important;}
    details.mobilenav summary{padding:5px;}
    .mobilepanel{min-width:170px;}
  }
  details.mobilenav{position:relative;}
  details.mobilenav summary{list-style:none; cursor:pointer; padding:8px; color:var(--fg); border:1px solid var(--border-strong); border-radius:6px;}
  details.mobilenav summary::-webkit-details-marker{display:none;}
  details.mobilenav[open] .mobilepanel{display:flex;}
  .mobilepanel{
    display:flex; flex-direction:column; gap:2px; position:absolute; right:0; top:calc(100% + 8px);
    background:var(--card); border:1px solid var(--border-strong); border-radius:10px; padding:8px; min-width:200px;
    box-shadow:0 12px 30px rgba(0,0,0,0.5);
  }
  .mobilepanel a{padding:10px 12px; border-radius:6px; text-decoration:none; color:var(--fg); font-size:0.92rem;}
  .mobilepanel a:hover{background:var(--popover);}

  /* ---------- hero ---------- */
  .hero-grid{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
    padding-block:76px 92px;
    background:
      radial-gradient(560px 420px at 82% 18%, var(--primary-soft), transparent 70%),
      repeating-linear-gradient(0deg, rgba(0,0,0,0.045) 0 1px, transparent 1px 42px),
      repeating-linear-gradient(90deg, rgba(0,0,0,0.045) 0 1px, transparent 1px 42px);
  }
  @media (max-width:900px){ .hero-grid{grid-template-columns:1fr; padding-block:52px 56px;} }
  .hero-badge{
    display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:0.72rem;
    color:var(--positive); background:var(--positive-soft); border:1px solid rgba(4,120,87,0.30);
    padding:6px 12px; border-radius:100px; letter-spacing:0.04em; margin-bottom:22px;
  }
  .hero-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--positive); box-shadow:0 0 0 3px rgba(4,120,87,0.20);}
  .hero-hook{font-size:clamp(1.05rem,1.7vw,1.35rem); font-weight:700; color:var(--primary-hi); margin-bottom:14px; line-height:1.5;}
  .hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.32;}
  .hero-cat{font-family:var(--font-mono); font-size:clamp(1rem,1.5vw,1.2rem); color:var(--muted-fg); margin-top:22px; letter-spacing:0.02em;}
  .hero-cat b{color:var(--fg); font-weight:700;}
  .hero p.lede{margin-top:16px; font-size:1.04rem;}
  .hero-ctas{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}

  /* hero mock panel */
  .panel{
    background:var(--card); border:1px solid var(--border-strong); border-radius:14px;
    box-shadow:0 30px 70px -20px rgba(0,0,0,0.6);
    overflow:hidden;
  }
  .panel-top{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border);}
  .panel-top .name{font-family:var(--font-mono); font-size:0.82rem; color:var(--fg); font-weight:600;}
  .panel-top .tag{font-family:var(--font-mono); font-size:0.68rem; color:var(--positive); background:var(--positive-soft); padding:3px 8px; border-radius:4px; border:1px solid rgba(52,211,153,0.3);}
  .panel-body{padding:18px;}
  .lifecycle-row{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px;}
  @media (max-width:480px){ .lifecycle-row{gap:4px;} .lc-chip{padding:4px 6px !important; font-size:0.6rem !important; letter-spacing:0.02em !important;} }
  .lc-chip{font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.04em; padding:5px 9px; border-radius:5px; border:1px solid var(--border-strong); color:var(--muted-fg);}
  .lc-chip.done{color:var(--positive); border-color:rgba(52,211,153,0.35); background:var(--positive-soft);}
  .lc-chip.active{color:var(--fg); border-color:var(--primary); background:var(--primary-soft);}
  .chart-box{background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:16px;}
  .stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
  .stat{background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:12px;}
  .stat .k{font-family:var(--font-mono); font-size:0.66rem; color:var(--muted-fg); letter-spacing:0.04em;}
  .stat .v{font-family:var(--font-mono); font-size:1.1rem; font-weight:600; margin-top:4px;}
  .v.pos{color:var(--positive);} .v.neg{color:var(--negative);}
  .panel-caption{font-family:var(--font-mono); font-size:0.66rem; color:var(--muted-fg); text-align:right; padding:10px 18px; border-top:1px solid var(--border);}

  /* ---------- problem -> solution ---------- */
  .video-embed{
    position:relative; width:100%; max-width:720px; aspect-ratio:16/9; margin-top:28px;
    background:#000; border-radius:12px; overflow:hidden; border:1px solid var(--border-strong);
  }
  .video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
  .ps-list{display:flex; flex-direction:column; gap:16px; margin-top:40px;}
  .ps-row{display:grid; grid-template-columns:1fr 28px 1fr; align-items:stretch; gap:12px;}
  @media (max-width:760px){
    .ps-list{gap:26px;}
    .ps-row{grid-template-columns:1fr; gap:6px;}
  }
  .ps-before, .ps-after{padding:22px 24px; display:flex; flex-direction:column; gap:8px; border:1px solid var(--border); border-radius:12px;}
  .ps-before{background:var(--negative-soft); border-color:rgba(220,38,38,0.24);}
  .ps-after{background:var(--positive-soft); border-color:rgba(4,120,87,0.30);}
  .ps-tag{font-family:var(--font-mono); font-size:0.68rem; font-weight:700; letter-spacing:0.08em;}
  .ps-before .ps-tag{color:var(--negative);}
  .ps-after .ps-tag{color:var(--positive);}
  .ps-row p{font-size:0.98rem; color:var(--fg);}
  .ps-arrow{display:flex; align-items:center; justify-content:center; color:var(--muted-fg);}
  .ps-arrow svg{width:22px; height:22px;}
  @media (max-width:760px){ .ps-arrow{height:22px;} .ps-arrow svg{transform:rotate(90deg);} }

  /* ---------- vision ---------- */
  .vision-list{display:flex; flex-direction:column; gap:0; margin-top:36px; max-width:720px;}
  .vision-item{display:flex; gap:16px; padding-block:20px; border-top:1px solid var(--border);}
  .vision-item:first-child{border-top:none;}
  .vision-item svg{flex-shrink:0; width:20px; height:20px; margin-top:3px; color:var(--primary-hi);}
  .vision-item p{font-size:1.08rem;}
  .vision-close{
    margin-top:52px; font-family:var(--font-jp); font-weight:900;
    font-size:clamp(1.6rem,3.6vw,2.6rem); text-align:left; color:var(--fg);
  }
  .vision-close span{color:var(--primary-hi);}

  /* ---------- about / lifecycle flow ---------- */
  .about-lede{max-width:720px; font-size:1.08rem; color:var(--fg); margin-top:18px;}
  .flow{display:flex; align-items:stretch; gap:0; margin-top:52px; overflow-x:auto; padding-bottom:8px;}
  .flow-step{display:flex; align-items:center; flex-shrink:0;}
  .flow-node{
    width:132px; min-height:104px; background:var(--card); border:1px solid var(--border-strong);
    border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:12px;
    text-align:center;
  }
  .flow-node .en{font-family:var(--font-mono); font-weight:600; font-size:0.9rem; color:var(--fg); letter-spacing:0.02em;}
  .flow-node .jp{font-size:0.76rem; color:var(--muted-fg);}
  .flow-node.emph{border-color:var(--primary); background:var(--primary-soft);}
  .flow-arrow{width:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--muted-fg);}
  .flow-arrow svg{width:20px; height:20px;}
  @media (max-width:640px){
    .flow{flex-direction:column; align-items:stretch; overflow:visible; margin-top:36px; padding-bottom:0;}
    .flow-step{width:100%;}
    .flow-node{width:100%; min-height:0; flex-direction:row; justify-content:space-between; padding:14px 20px;}
    .flow-arrow{width:auto; height:28px;}
    .flow-arrow svg{transform:rotate(90deg);}
  }

  /* ---------- 3 values ---------- */
  .values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px;}
  @media (max-width:820px){ .values-grid{grid-template-columns:1fr;} }
  .value-card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:30px 26px;}
  .value-num{font-family:var(--font-mono); font-size:0.78rem; color:var(--muted-fg); letter-spacing:0.06em;}
  .value-title{font-family:var(--font-mono); font-size:1.5rem; font-weight:700; margin-top:10px; letter-spacing:0.01em;}
  .value-jp{font-size:1.05rem; font-weight:700; margin-top:14px;}
  .value-desc{font-size:0.92rem; color:var(--muted-fg); margin-top:10px;}
  .value-card:nth-child(1) .value-title{color:var(--c1);}
  .value-card:nth-child(2) .value-title{color:#b45309;}
  .value-card:nth-child(3) .value-title{color:#047857;}

  /* ---------- how it works ---------- */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; counter-reset:step;}
  @media (max-width:820px){ .steps{grid-template-columns:1fr;} }
  .step{position:relative; padding:30px 24px 26px; border:1px solid var(--border); border-radius:12px; background:var(--surface);}
  .step-index{font-family:var(--font-mono); font-size:0.78rem; color:var(--primary-hi); letter-spacing:0.06em;}
  .step h3{font-size:1.12rem; margin-top:12px;}
  .step p{font-size:0.92rem; color:var(--muted-fg); margin-top:10px;}
  .psych{margin-top:52px; text-align:center; font-size:1.15rem; color:var(--fg); font-weight:700;}
  .psych .to{color:var(--muted-fg); font-weight:400; margin:0 10px;}
  .psych .after{color:var(--positive);}

  /* ---------- features ---------- */
  .feat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); margin-top:44px; border:1px solid var(--border); border-radius:12px; overflow:hidden;}
  @media (max-width:920px){ .feat-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .feat-grid{grid-template-columns:1fr;} }
  .feat{background:var(--surface); padding:26px 22px; display:flex; flex-direction:column; gap:14px;}
  .feat.ai{background:var(--ai-bg);}
  .feat-icon{width:34px; height:34px; border-radius:8px; background:var(--popover); display:flex; align-items:center; justify-content:center; color:var(--fg);}
  .feat.ai .feat-icon{background:rgba(79,70,229,0.14); color:var(--ai-fg);}
  .feat-icon svg{width:18px; height:18px;}
  .feat .value{font-size:0.95rem; font-weight:700;}
  .feat .fname{font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.04em; color:var(--muted-fg); text-transform:uppercase;}
  .feat.ai .fname{color:var(--ai-fg);}
  .feat .fdesc{font-size:0.85rem; color:var(--muted-fg);}

  /* ---------- for you ---------- */
  .foryou-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:20px; margin-top:44px;}
  @media (max-width:760px){ .foryou-grid{grid-template-columns:1fr;} }
  .fy-card{border-radius:12px; padding:28px 26px; border:1px solid var(--border);}
  .fy-yes{background:var(--positive-soft); border-color:rgba(4,120,87,0.25);}
  .fy-no{background:var(--surface);}
  .fy-title{font-weight:700; font-size:1.05rem; margin-bottom:18px;}
  .fy-card ul{display:flex; flex-direction:column; gap:12px;}
  .fy-card li{display:flex; gap:10px; align-items:flex-start; font-size:0.94rem;}
  .fy-card li svg{width:17px; height:17px; flex-shrink:0; margin-top:3px;}
  .fy-yes li svg{color:var(--positive);}
  .fy-no li svg{color:var(--muted-fg);}
  .fy-no .fy-note{margin-top:16px; font-size:0.82rem; color:var(--muted-fg);}

  /* ---------- trust ---------- */
  .origin{
    display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-top:8px;
  }
  @media (max-width:800px){ .origin{grid-template-columns:1fr;} }
  .origin-quote{
    border-left:3px solid var(--primary); padding-left:22px; font-size:1.15rem; line-height:1.85; color:var(--fg);
  }
  .origin-quote footer{padding-block:0; margin-top:16px; font-family:var(--font-mono); font-size:0.76rem; color:var(--muted-fg);}
  .origin-side p{font-size:0.94rem; color:var(--muted-fg);}
  .origin-side p + p{margin-top:14px;}

  .company-x{display:flex; align-items:stretch; gap:20px; margin-top:52px;}
  @media (max-width:700px){ .company-x{flex-direction:column;} }
  .company-card{
    flex:1; background:var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:28px 26px; display:flex; flex-direction:column; gap:8px; justify-content:center;
  }
  .company-card .company-name{font-weight:700; font-size:1.05rem;}
  .company-card .company-role{font-size:0.8rem; color:var(--muted-fg);}
  .company-x-mark{
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:1.3rem; font-weight:700; color:var(--muted-fg);
    flex-shrink:0; width:36px;
  }
  @media (max-width:700px){ .company-x-mark{width:auto; padding:2px 0;} }

  .subhead{font-size:0.98rem; font-weight:700; margin-top:64px; margin-bottom:0; display:flex; align-items:baseline; gap:10px;}
  .subhead .tag{font-family:var(--font-mono); font-size:0.68rem; color:var(--muted-fg); font-weight:500;}

  .gov-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px;}
  @media (max-width:760px){ .gov-grid{grid-template-columns:1fr;} }
  .gov-item{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:18px 20px;}
  .gov-item .g-k{font-family:var(--font-mono); font-size:0.68rem; color:var(--muted-fg); letter-spacing:0.05em; text-transform:uppercase;}
  .gov-item .g-v{font-size:0.9rem; margin-top:6px;}

  /* ---------- before/after ---------- */
  .ba-lede{max-width:620px;}
  .ba-list{display:flex; flex-direction:column; gap:12px; margin-top:40px;}
  .ba-item{
    display:grid; grid-template-columns:1fr 200px 1fr; grid-template-areas:"from tag to" "from arrow to";
    align-items:center; column-gap:16px; row-gap:2px; padding:18px 26px;
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
  }
  .ba-from{grid-area:from; color:var(--muted-fg); font-size:1.02rem;}
  .ba-to{grid-area:to; color:var(--positive); font-weight:700; font-size:1.08rem; text-align:right;}
  .ba-tag{grid-area:tag; text-align:center; font-family:var(--font-mono); font-size:0.7rem; font-weight:600; letter-spacing:0.04em; color:var(--primary-hi); align-self:end;}
  .ba-arrow{grid-area:arrow; display:flex; justify-content:center; color:var(--muted-fg); align-self:start;}
  .ba-arrow svg{width:100%; max-width:120px; height:14px;}
  @media (max-width:600px){
    .ba-item{grid-template-columns:1fr 44px 1fr; grid-template-areas:"tag tag tag" "from arrow to"; padding:14px 16px; row-gap:8px; column-gap:8px; align-items:center;}
    .ba-tag{text-align:left; align-self:auto;}
    .ba-arrow svg{width:40px; height:14px;}
    .ba-from{font-size:0.9rem;}
    .ba-to{font-size:0.95rem;}
  }

  /* ---------- feature matrix ---------- */
  .pm{margin-top:40px;}
  .pm-tabs{display:none;}
  .pm-wrap{border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--card);}
  .pm-table{width:100%; border-collapse:collapse; font-size:0.9rem;}
  .pm-table th, .pm-table td{padding:13px 16px; text-align:center; border-top:1px solid var(--border); vertical-align:middle; line-height:1.55;}
  .pm-table thead th{background:var(--surface); border-top:none; font-family:var(--font-mono); font-size:0.76rem; font-weight:600; letter-spacing:0.04em; color:var(--muted-fg);}
  .pm-table th[scope="row"], .pm-table .pm-feat{text-align:left; font-weight:400; color:var(--fg); width:28%;}
  .pm-table .pm-feat{font-family:var(--font-jp); font-weight:700; color:var(--muted-fg);}
  .pm-key th[scope="row"]{font-weight:700;}
  .pm-table td{color:var(--fg);}
  .pm-table td small{display:block; font-size:0.72rem; color:var(--muted-fg);}
  .pm-table .c3{background:var(--positive-soft);}
  .pm-table thead .c3{background:rgba(4,120,87,0.12); color:var(--positive);}
  .pm-table td.c3{color:var(--positive); font-weight:700;}
  .pm-table td.c3.pm-o, .pm-table td.c3.pm-x, .pm-table td.c3.pm-n{font-weight:400;}
  .pm-table .pm-n{color:var(--muted-fg);}
  .pm-table td.c3.pm-n{color:var(--muted-fg);}
  .pm-note{margin-top:14px; font-size:0.78rem; color:var(--muted-fg);}
  @media (max-width:700px){
    .pm-tabs{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:4px; margin-bottom:14px; background:var(--surface); border:1px solid var(--border); border-radius:10px;}
    .pm-tabs button{font-family:var(--font-jp); font-size:0.8rem; font-weight:700; padding:9px 4px; border:0; border-radius:7px; background:transparent; color:var(--muted-fg); cursor:pointer;}
    .pm-tabs button[aria-selected="true"]{background:var(--card); color:var(--fg); box-shadow:0 1px 3px rgba(0,0,0,0.12);}
    .pm-table th, .pm-table td{padding:12px 12px; font-size:0.86rem;}
    .pm-table th[scope="row"], .pm-table .pm-feat{width:46%;}
    .pm[data-plan="1"] .c2, .pm[data-plan="1"] .c3, .pm[data-plan="1"] .c4,
    .pm[data-plan="2"] .c1, .pm[data-plan="2"] .c3, .pm[data-plan="2"] .c4,
    .pm[data-plan="3"] .c1, .pm[data-plan="3"] .c2, .pm[data-plan="3"] .c4,
    .pm[data-plan="4"] .c1, .pm[data-plan="4"] .c2, .pm[data-plan="4"] .c3{display:none;}
    .pm-table td{text-align:right;}
    .pm-table thead th:not(.pm-feat){text-align:right;}
  }

  /* ---------- pricing ---------- */
  .offer-wrap{display:flex; justify-content:center; margin-top:44px;}
  .offer-card{
    max-width:480px; width:100%; background:linear-gradient(180deg, var(--card), var(--surface));
    border:1px solid var(--border-strong); border-radius:16px; padding:38px 36px;
    position:relative; overflow:hidden;
  }
  .offer-card::before{
    content:""; position:absolute; inset:0; background:radial-gradient(400px 200px at 100% 0%, var(--primary-soft), transparent 70%); pointer-events:none;
  }
  .offer-kicker{font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; color:var(--primary-hi); text-transform:uppercase;}
  .offer-title{font-size:1.7rem; margin-top:10px;}
  .offer-sub{color:var(--muted-fg); font-size:0.9rem; margin-top:10px;}
  .offer-list{display:flex; flex-direction:column; gap:12px; margin-top:26px; padding-top:26px; border-top:1px solid var(--border);}
  .offer-list li{display:flex; gap:10px; font-size:0.92rem; align-items:flex-start;}
  .offer-list li svg{width:16px; height:16px; margin-top:3px; color:var(--positive); flex-shrink:0;}
  .offer-card .btn{margin-top:28px;}
  .offer-fine{font-size:0.78rem; color:var(--muted-fg); margin-top:16px;}

  /* ---------- faq ---------- */
  .faq-list{margin-top:40px; border-top:1px solid var(--border);}
  details.faq-item{border-bottom:1px solid var(--border); padding-block:20px;}
  details.faq-item summary{
    list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px;
    font-weight:700; font-size:0.98rem;
  }
  details.faq-item summary::-webkit-details-marker{display:none;}
  details.faq-item summary .chev{flex-shrink:0; width:18px; height:18px; color:var(--muted-fg); transition:transform .18s ease;}
  details.faq-item[open] summary .chev{transform:rotate(180deg);}
  details.faq-item .a{margin-top:14px; color:var(--muted-fg); font-size:0.92rem; max-width:680px;}
  .faq-callout{
    margin-top:32px; background:var(--caution-soft); border:1px solid rgba(180,83,9,0.30); border-radius:10px;
    padding:16px 20px; font-size:0.88rem; color:var(--fg); display:flex; gap:12px;
  }
  .faq-callout svg{width:18px; height:18px; color:var(--caution); flex-shrink:0; margin-top:1px;}

  /* ---------- final cta ---------- */
  .final{
    text-align:center; padding-block:96px;
    background:radial-gradient(700px 380px at 50% 0%, var(--primary-soft), transparent 70%);
  }
  .final .brandmark{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:26px;}
  .final .brandmark svg{width:26px; height:26px;}
  .final .brandmark span{font-family:var(--font-brand); font-weight:800; font-size:1.15rem;}
  .final h2{font-size:clamp(1.8rem,4.4vw,3rem);}
  .final-risklist{display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; margin-top:30px; font-size:0.84rem; color:var(--muted-fg);}
  .final-risklist span{display:flex; align-items:center; gap:6px;}
  .final-risklist svg{width:14px; height:14px; color:var(--positive);}
  .final .hero-ctas{justify-content:center; margin-top:38px;}

  /* ---------- footer ---------- */
  footer{padding-block:48px; font-size:0.82rem; color:var(--muted-fg); background:var(--bg);}
  .foot-top{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-bottom:32px; border-bottom:1px solid var(--border);}
  .foot-brand{display:flex; align-items:center; gap:8px;}
  .foot-brand svg{width:18px; height:18px;}
  .foot-brand span{font-family:var(--font-brand); font-weight:800; color:var(--fg); font-size:0.95rem;}
  .foot-links{display:flex; gap:24px; flex-wrap:wrap;}
  .foot-links a{text-decoration:none; color:var(--muted-fg);}
  .foot-links a:hover{color:var(--fg);}
  .foot-legal{margin-top:26px; line-height:1.9;}
  .foot-legal p + p{margin-top:10px;}
  .foot-docs{margin-top:22px; padding:20px 0 22px; border-block:1px solid var(--border);}
  .foot-docs-title{display:flex; align-items:baseline; gap:10px; font-weight:700; font-size:0.86rem; color:var(--fg);}
  .foot-docs-title .tag{font-family:var(--font-mono); font-size:0.66rem; font-weight:500; color:var(--muted-fg); letter-spacing:0.04em;}
  .foot-docs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px;}
  @media (max-width:760px){ .foot-docs-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:480px){ .foot-docs-grid{grid-template-columns:1fr;} }
  .foot-doc{
    display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:8px;
    text-decoration:none; color:var(--fg); font-size:0.84rem; line-height:1.5;
    transition:background-color .15s ease, border-color .15s ease;
  }
  .foot-doc:hover{background:var(--card); border-color:var(--border-strong);}
  .foot-doc svg{width:16px; height:16px; flex-shrink:0; color:var(--muted-fg);}
  .foot-doc .pdf-tag{margin-left:auto; flex-shrink:0; font-family:var(--font-mono); font-size:0.62rem; color:var(--muted-fg); border:1px solid var(--border-strong); border-radius:4px; padding:1px 6px;}
  .foot-docs + p{margin-top:22px;}
  .foot-bottom{margin-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

  @media (prefers-reduced-motion:reduce){
    *{transition:none !important;}
  }

  /* ---------- lead-capture forms ---------- */
  .field-label{display:block; font-size:0.78rem; color:var(--muted-fg); margin-bottom:6px;}
  .field-input{
    width:100%; background:var(--surface); border:1px solid var(--input); color:var(--fg);
    border-radius:6px; padding:12px 14px; font-family:var(--font-jp); font-size:0.94rem; line-height:1.4;
  }
  .field-input::placeholder{color:var(--muted-fg);}
  .field-input:focus-visible{outline:2px solid var(--link); outline-offset:1px; border-color:var(--link);}

  .hero-form{margin-top:34px; max-width:440px;}
  .hero-form form{display:flex; gap:10px; flex-wrap:wrap;}
  .hero-form .field-input{flex:1 1 220px;}
  .hero-form .form-fine{font-size:0.78rem; color:var(--muted-fg); margin-top:10px;}
  .hero-form .form-fine a{color:var(--muted-fg); text-decoration:underline;}
  .hero-more{margin-top:16px;}
  .hero-more a{font-size:0.88rem; color:var(--muted-fg); text-decoration:none; border-bottom:1px solid var(--border-strong); padding-bottom:1px;}
  .hero-more a:hover{color:var(--fg); border-color:var(--fg);}

  .success-box{
    display:flex; gap:12px; align-items:flex-start; background:var(--positive-soft);
    border:1px solid rgba(4,120,87,0.30); border-radius:10px; padding:16px 18px; font-size:0.92rem;
  }
  .success-box svg{width:20px; height:20px; color:var(--positive); flex-shrink:0; margin-top:1px;}
  .success-box strong{display:block; margin-bottom:2px;}
  .success-box[hidden]{display:none;}

  .signup-form{display:flex; flex-direction:column; gap:14px;}
  .signup-form .row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  @media (max-width:480px){ .signup-form .row2{grid-template-columns:1fr;} }
  .form-consent{font-size:0.76rem; color:var(--muted-fg); line-height:1.6;}
  .form-consent a{color:var(--muted-fg); text-decoration:underline;}

  /* ---------- mobile sticky CTA ---------- */
  .sticky-cta{display:none;}
  @media (max-width:760px){
    .sticky-cta{
      display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
      padding:12px 20px; padding-bottom:calc(12px + env(safe-area-inset-bottom));
      background:rgba(10,10,10,0.92); backdrop-filter:blur(10px); border-top:1px solid var(--border-strong);
      gap:10px; align-items:center;
    }
    .sticky-cta span{font-size:0.8rem; color:var(--muted-fg); flex:1; line-height:1.4;}
    .sticky-cta .btn{flex-shrink:0;}
    body{padding-bottom:76px;}
  }