:root{
    --paper: #f6f4ee;
    --paper-2: #ecebe3;
    --ink: #14110d;
    --ink-soft: #3d3a33;
    --muted: #7a766b;
    --rule: #d6d2c4;
    --accent: #1a3d2e;
    --accent-2: #2a5a44;
    --accent-soft: #d8e2db;
    --warn: #b8542a;
    --copper: #b8895a;
    --copper-bright: #d4a373;
    --display: "Fraunces", "Noto Serif JP", "Hiragino Mincho ProN", serif;
    --sans: "Inter Tight", "Noto Sans JP", system-ui, sans-serif;
    --tc: "Noto Sans JP", "Inter Tight", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--paper);color:var(--ink);
    font-family:var(--sans);font-weight:400;line-height:1.5;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
  ::selection{background:var(--accent);color:var(--paper)}
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.04;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  nav.top{
    position:fixed;top:0;left:0;right:0;z-index:80;
    display:flex;justify-content:space-between;align-items:center;
    padding:20px 40px;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    background:rgba(246,244,238,.7);
    border-bottom:1px solid transparent;transition:border-color .3s, background .3s;
  }
  nav.top.scrolled{border-bottom-color:var(--rule);background:rgba(246,244,238,.92)}
  .brand{display:flex;align-items:baseline;gap:12px;flex-shrink:0;white-space:nowrap}
  .brand .tc{font-family:var(--tc);font-weight:700;font-size:18px;letter-spacing:.04em;color:var(--ink)}
  .brand .en{font-family:var(--display);font-weight:500;font-size:18px;color:var(--muted)}
  .brand .dot{display:inline-block;width:19px;height:19px;background:url(/satsuma-mark.svg) no-repeat center/contain;transform:translateY(4px)}
  nav.top ul{display:flex;gap:32px;list-style:none;font-family:var(--mono);font-size:12px;letter-spacing:.05em}
  nav.top ul a{position:relative;padding:4px 0;transition:color .2s}
  nav.top ul a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);transition:width .25s ease}
  nav.top ul a:hover::after{width:100%}
  nav.top ul a.cur::after{width:100%}
  .nav-cta{
    font-family:var(--mono);font-size:12px;letter-spacing:.05em;
    padding:8px 16px;border:1px solid var(--ink);border-radius:999px;
    transition:background .2s,color .2s;cursor:pointer;display:inline-block;
  }
  .nav-cta:hover{background:var(--ink);color:var(--paper)}
  .nav-hamburger{
    display:none;flex-direction:column;justify-content:center;align-items:center;
    gap:5px;width:36px;height:36px;padding:4px;background:none;border:0;cursor:pointer;
  }
  .nav-hamburger span{
    display:block;width:22px;height:1.5px;background:var(--ink);
    transition:transform .22s ease,opacity .18s ease;transform-origin:center;
  }
  nav.top.open .nav-hamburger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  nav.top.open .nav-hamburger span:nth-child(2){opacity:0;transform:scaleX(0)}
  nav.top.open .nav-hamburger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .nav-mobile-cta{display:none}
  @media (max-width:820px){
    nav.top{padding:14px 24px}
    nav.top ul{
      display:none;position:absolute;top:100%;left:0;right:0;
      flex-direction:column;gap:0;list-style:none;
      background:rgba(246,244,238,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
      border-bottom:1px solid var(--rule);padding:6px 0 18px;
    }
    nav.top.open ul{display:flex}
    nav.top ul li a{
      display:block;padding:13px 24px;
      font-family:var(--mono);font-size:13px;letter-spacing:.05em;
    }
    nav.top ul li a:active{background:var(--paper-2)}
    .nav-cta{display:none}
    .nav-mobile-cta{display:list-item}
    .nav-mobile-cta a{display:block;text-align:center;margin:8px 24px 0;padding:10px 20px;border:1px solid var(--ink);border-radius:999px;color:var(--ink);font-family:var(--mono);font-size:13px;letter-spacing:.05em}
    .nav-hamburger{display:flex}
  }
  .nav-lang{font-family:var(--mono);font-size:12px;letter-spacing:.05em;padding:7px 12px;border:1px solid currentColor;background:transparent;color:inherit;border-radius:4px;text-decoration:none;transition:opacity .2s;margin-left:10px;cursor:pointer;opacity:.7}
  .nav-lang:hover{opacity:1}
  @media (max-width:820px){.nav-lang{padding:5px 9px;margin-left:6px;font-size:11px}}

  .hero{
    padding:170px 40px 70px;
    border-bottom:1px solid var(--rule);
    background:linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  }
  .hero .hero-meta{
    display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;
    font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted);
    margin-bottom:52px;
  }
  .hero h1{
    font-family:var(--display);font-weight:300;
    font-size:clamp(30px,4.8vw,72px);
    line-height:1.1;letter-spacing:-.03em;margin-bottom:22px;max-width:1320px;
  }
  .hero h1 em{font-style:normal;font-weight:500;color:var(--accent);display:block}
  .hero .hero-lede{
    font-family:var(--tc);font-weight:300;font-size:clamp(16px,1.5vw,21px);
    line-height:1.8;color:var(--ink-soft);max-width:700px;margin-bottom:28px;
  }
  .hero .hero-lede strong{font-weight:500;color:var(--ink)}
  .hero-price{
    font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--accent);
    padding:10px 16px;border:1px solid var(--accent-soft);background:var(--accent-soft);
    border-radius:6px;display:inline-block;margin-bottom:32px;
  }
  .hero-cta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:15px 28px;border-radius:999px;
    font-family:var(--mono);font-size:14px;letter-spacing:.05em;
    transition:transform .2s, background .2s, color .2s;cursor:pointer;
  }
  .btn-primary{background:var(--ink);color:var(--paper)}
  .btn-primary:hover{background:var(--accent);transform:translateY(-1px)}
  .btn-ghost{border:1px solid var(--ink)}
  .btn-ghost:hover{background:var(--ink);color:var(--paper)}
  .btn .arrow{transition:transform .2s}
  .btn:hover .arrow{transform:translate(3px,-3px)}
  @media (max-width:820px){.hero{padding:120px 24px 48px}}

  section{padding:110px 40px;position:relative}
  @media (max-width:820px){section{padding:72px 24px}}
  .section-head{display:grid;grid-template-columns:160px 1fr;gap:40px;margin-bottom:56px;align-items:start}
  .section-head .label{
    font-family:var(--mono);font-size:12px;letter-spacing:.15em;color:var(--muted);
    text-transform:uppercase;padding-top:12px;
    border-top:1px solid var(--ink);display:block;width:max-content;
  }
  .section-head h2{
    font-family:var(--display);font-weight:300;
    font-size:clamp(28px,3.8vw,54px);line-height:1.18;letter-spacing:-.02em;max-width:900px;
  }
  .section-head h2 em{font-style:normal;font-weight:500;color:var(--accent)}
  .section-head .sub{
    font-family:var(--tc);font-weight:300;font-size:17px;line-height:1.85;
    color:var(--ink-soft);max-width:700px;margin-top:18px;
  }
  @media (max-width:820px){.section-head{grid-template-columns:1fr;gap:18px}}

  /* pain band */
  .pain-band{background:var(--ink);color:#e8e4da;padding:52px 40px;border-bottom:1px solid var(--rule)}
  .pain-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
  .pain{padding:0 28px;border-left:1px solid rgba(232,228,218,.18)}
  .pain:first-child{padding-left:0;border-left:0}
  .pain .q{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--copper-bright);margin-bottom:12px;display:block}
  .pain p{font-family:var(--tc);font-weight:300;font-size:16.5px;line-height:1.8}
  @media (max-width:820px){
    .pain-band{padding:40px 24px}
    .pain-inner{grid-template-columns:1fr;gap:28px}
    .pain{padding:0;border-left:0;border-top:1px solid rgba(232,228,218,.18);padding-top:22px}
    .pain:first-child{border-top:0;padding-top:0}
  }

  /* basics */
  #basics{background:var(--paper)}
  .basics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
  .basic{padding:38px 28px 34px;border-right:1px solid var(--rule);transition:background .3s}
  .basic:last-child{border-right:0}
  .basic:hover{background:var(--paper-2)}
  .basic .num{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--copper);margin-bottom:18px;display:block}
  .basic h3{font-family:var(--display);font-weight:400;font-size:25px;line-height:1.2;margin-bottom:6px}
  .basic .meta{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--muted);margin-bottom:16px}
  .basic p{font-family:var(--tc);font-weight:300;font-size:16px;line-height:1.85;color:var(--ink-soft);margin-bottom:12px}
  .basic p:last-child{margin-bottom:0}
  .basic p strong{font-weight:500;color:var(--ink)}
  @media (max-width:1000px){
    .basics-grid{grid-template-columns:1fr}
    .basic{border-right:0;border-bottom:1px solid var(--rule)}
    .basic:last-child{border-bottom:0}
  }
  .basics-note{
    margin-top:36px;padding:22px 26px;border-left:2px solid var(--accent);background:var(--accent-soft);
    font-family:var(--tc);font-weight:300;font-size:16.5px;line-height:1.9;color:var(--ink-soft);
  }
  .basics-note strong{font-weight:500;color:var(--accent)}

  /* value list */
  #value{background:var(--paper-2)}
  .val{
    display:grid;grid-template-columns:300px 1fr;gap:44px;
    padding:34px 0;border-top:1px solid var(--rule);align-items:start;
  }
  .val:last-child{border-bottom:1px solid var(--rule)}
  .val .val-head h3{font-family:var(--display);font-weight:400;font-size:27px;line-height:1.2;margin-bottom:8px}
  .val .val-head .tag{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--copper)}
  .val .val-body p{font-family:var(--tc);font-weight:300;font-size:16.5px;line-height:1.9;color:var(--ink-soft)}
  .val .val-body p + p{margin-top:12px}
  .val .val-body strong{font-weight:500;color:var(--ink)}
  .val .proof{
    margin-top:16px;font-family:var(--mono);font-size:13px;letter-spacing:.03em;
    color:var(--accent-2);line-height:1.7;
  }
  .val .proof .k{color:var(--copper);margin-right:8px}
  @media (max-width:820px){.val{grid-template-columns:1fr;gap:14px}}

  /* ownership */
  #own{background:var(--ink);color:#e8e4da;border-top:0}
  #own .own-inner{max-width:1000px;margin:0 auto;text-align:center}
  #own .label{font-family:var(--mono);font-size:12px;letter-spacing:.15em;color:var(--copper-bright);display:block;margin-bottom:26px}
  #own h2{font-family:var(--display);font-weight:300;font-size:clamp(30px,4.4vw,60px);line-height:1.15;letter-spacing:-.02em;margin-bottom:26px}
  #own h2 em{font-style:normal;font-weight:500;color:var(--copper-bright)}
  #own p{font-family:var(--tc);font-weight:300;font-size:18px;line-height:1.95;max-width:680px;margin:0 auto;color:#cfc9bc}
  #own .own-items{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px}
  #own .own-items span{
    font-family:var(--mono);font-size:13px;letter-spacing:.06em;
    padding:9px 18px;border:1px solid rgba(232,228,218,.28);border-radius:999px;
  }

  /* pricing */
  #pricing{background:var(--paper)}
  .tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
  .tier{
    padding:38px 28px 34px;border-right:1px solid var(--rule);
    display:flex;flex-direction:column;min-height:420px;transition:background .3s;
  }
  .tier:last-child{border-right:0}
  .tier:hover{background:var(--accent-soft)}
  .tier .num{font-family:var(--display);font-weight:500;font-size:40px;color:var(--accent);line-height:1;margin-bottom:20px}
  .tier h3{font-family:var(--display);font-weight:300;font-size:26px;line-height:1.2;margin-bottom:10px}
  .tier .who{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--copper);margin-bottom:20px}
  .tier ul{list-style:none;font-family:var(--tc);font-weight:300;font-size:15px;line-height:1.75;color:var(--ink-soft)}
  .tier ul li{padding:7px 0 7px 20px;position:relative;border-bottom:1px dotted var(--rule)}
  .tier ul li::before{content:"—";position:absolute;left:0;color:var(--copper)}
  .tier ul li:last-child{border-bottom:0}
  .tier-foot{margin-top:auto;padding-top:24px}
  .tier .price{
    font-family:var(--display);font-weight:500;font-size:26px;color:var(--accent);
    padding-top:16px;border-top:1px solid var(--rule);margin-bottom:8px;
  }
  .tier .price .alt{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--muted);letter-spacing:.04em}
  .tier .delivery{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--muted);line-height:1.6}
  .tier .delivery .k{color:var(--copper);margin-right:6px}
  @media (max-width:1000px){
    .tier-grid{grid-template-columns:1fr}
    .tier{border-right:0;border-bottom:1px solid var(--rule);min-height:auto}
    .tier:last-child{border-bottom:0}
  }
  .price-note{
    margin-top:38px;text-align:center;
    font-family:var(--mono);font-size:13.5px;letter-spacing:.05em;color:var(--muted);line-height:1.9;
  }
  .price-note em{font-style:normal;color:var(--accent);font-weight:500}

  /* addons + gift */
  #addons{background:var(--paper-2)}
  .addon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:56px}
  .addon{
    background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:24px 24px 20px;
    display:flex;flex-direction:column;transition:border-color .3s,transform .3s;
  }
  .addon:hover{border-color:var(--accent-2);transform:translateY(-3px)}
  .addon h3{font-family:var(--display);font-weight:400;font-size:23px;margin-bottom:10px}
  .addon p{font-family:var(--tc);font-weight:300;font-size:15px;line-height:1.85;color:var(--ink-soft)}
  .addon .cost{
    margin-top:auto;padding-top:16px;
    font-family:var(--mono);font-size:13px;letter-spacing:.05em;color:var(--accent);
  }
  @media (max-width:820px){.addon-grid{grid-template-columns:1fr}}
  .gift{border:1px solid var(--accent-2);border-radius:10px;padding:32px 30px;background:var(--paper)}
  .gift .gift-label{font-family:var(--mono);font-size:12px;letter-spacing:.15em;color:var(--copper);display:block;margin-bottom:20px}
  .gift-items{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .gift-item h4{font-family:var(--display);font-weight:400;font-size:21px;margin-bottom:8px;color:var(--accent)}
  .gift-item p{font-family:var(--tc);font-weight:300;font-size:15px;line-height:1.85;color:var(--ink-soft)}
  @media (max-width:820px){.gift-items{grid-template-columns:1fr;gap:22px}}

  /* care / monthly */
  #care{background:var(--paper)}
  .care-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .care-list{list-style:none}
  .care-list li{
    padding:16px 0 16px 26px;border-bottom:1px solid var(--rule);position:relative;
    font-family:var(--tc);font-weight:300;font-size:16.5px;line-height:1.8;color:var(--ink-soft);
  }
  .care-list li::before{content:"✓";position:absolute;left:0;color:var(--accent-2);font-family:var(--mono);font-size:12px;top:18px}
  .care-list li strong{font-weight:500;color:var(--ink)}
  .care-price{
    border:1px solid var(--rule);border-radius:10px;padding:30px 28px;background:var(--paper-2);
  }
  .care-price .k{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--copper);display:block;margin-bottom:14px}
  .care-price .v{font-family:var(--display);font-weight:500;font-size:34px;color:var(--accent);line-height:1.1;margin-bottom:6px}
  .care-price .alt{font-family:var(--mono);font-size:13.5px;color:var(--muted);letter-spacing:.04em;display:block;margin-bottom:18px}
  .care-price p{font-family:var(--tc);font-weight:300;font-size:15px;line-height:1.85;color:var(--ink-soft)}
  @media (max-width:820px){.care-inner{grid-template-columns:1fr;gap:34px}}

  /* process */
  #process{background:var(--paper-2)}
  .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink)}
  .step{padding:34px 24px 30px;border-right:1px solid var(--rule)}
  .step:last-child{border-right:0}
  .step .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--copper);display:block;margin-bottom:16px}
  .step h3{font-family:var(--display);font-weight:400;font-size:22px;margin-bottom:10px}
  .step .t{font-family:var(--mono);font-size:13px;letter-spacing:.05em;color:var(--accent-2);margin-bottom:12px}
  .step p{font-family:var(--tc);font-weight:300;font-size:15px;line-height:1.85;color:var(--ink-soft)}
  @media (max-width:1000px){
    .flow{grid-template-columns:1fr}
    .step{border-right:0;border-bottom:1px solid var(--rule)}
    .step:last-child{border-bottom:0}
  }

  /* cases */
  #cases{background:var(--paper)}
  .case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .case{
    background:var(--paper-2);border:1px solid var(--rule);border-radius:10px;
    padding:26px 26px 22px;display:flex;flex-direction:column;
    transition:transform .3s, box-shadow .3s, border-color .3s;
  }
  .case:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(20,17,13,.12);border-color:var(--accent-2)}
  .case-meta{
    display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;margin-bottom:14px;
  }
  .case-meta .status{color:var(--accent-2)}
  .case-meta .dom{color:var(--muted)}
  .case h3{font-family:var(--display);font-weight:300;font-size:23px;line-height:1.25;letter-spacing:-.01em;margin-bottom:10px}
  .case-problem{font-family:var(--tc);font-weight:300;font-size:15px;line-height:1.75;color:var(--ink-soft)}
  .case-result{font-family:var(--tc);font-weight:300;font-size:14px;line-height:1.7;color:var(--muted);margin-top:10px}
  .case-result .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--copper);margin-right:6px}
  .case .stack{
    list-style:none;margin-top:auto;padding-top:18px;
    font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);
    display:flex;flex-wrap:wrap;gap:5px 8px;
  }
  .case .stack li{padding:3px 8px;border:1px solid var(--rule);border-radius:4px;background:var(--paper)}
  .case:hover .stack li{border-color:var(--accent-2)}
  @media (max-width:1000px){.case-grid{grid-template-columns:1fr}}
  .case-video{padding:18px 18px 16px}
  .case-video:hover{transform:none}
  .case-video video{display:block;width:100%;aspect-ratio:9/16;border-radius:8px;background:#140f24;margin-bottom:14px}
  @media (max-width:1000px){.case-video{max-width:380px;width:100%;justify-self:center}}

  /* faq */
  #faq{background:var(--paper-2)}
  .faq-list{border-top:1px solid var(--ink)}
  .faq-item{border-bottom:1px solid var(--rule)}
  .faq-item summary{
    list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
    font-family:var(--tc);font-weight:500;font-size:18.5px;line-height:1.55;
    transition:color .2s;
  }
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary:hover{color:var(--accent)}
  .faq-item summary::after{
    content:"+";position:absolute;right:6px;top:20px;
    font-family:var(--mono);font-size:20px;color:var(--copper);transition:transform .25s;
  }
  .faq-item[open] summary::after{transform:rotate(45deg)}
  .faq-item .a{
    padding:0 40px 26px 0;
    font-family:var(--tc);font-weight:300;font-size:16.5px;line-height:1.95;color:var(--ink-soft);
  }
  .faq-item .a p + p{margin-top:12px}
  .faq-item .a strong{font-weight:500;color:var(--ink)}

  /* cta */
  #cta{background:var(--paper);padding:130px 40px;border-top:1px solid var(--rule)}
  #cta::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 540px at 90% 10%, rgba(184,137,90,.08), transparent 60%)}
  .cta-inner{max-width:1200px;margin:0 auto;position:relative;display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:end}
  .cta-inner h2{font-family:var(--display);font-weight:500;font-size:clamp(34px,5.4vw,84px);line-height:.98;letter-spacing:-.02em}
  .cta-inner h2 .nx{font-weight:300;color:var(--ink)}
  .cta-inner h2 em{color:var(--accent);font-style:normal}
  .contact-meta .row{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:13.5px;letter-spacing:.05em}
  .contact-meta .row:first-of-type{border-top:1px solid var(--rule)}
  .contact-meta .row .k{color:var(--muted)}
  .cta-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
  @media (max-width:820px){#cta{padding:80px 24px}.cta-inner{grid-template-columns:1fr;gap:40px}}

  /* chat CTA */
  .chat-cta{
    margin-top:46px;padding:26px 30px;border:1px dashed var(--accent-2);border-radius:10px;
    background:var(--accent-soft);
    display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  }
  .chat-cta .t{
    font-family:var(--tc);font-weight:300;font-size:16.5px;line-height:1.8;
    color:var(--ink-soft);max-width:640px;
  }
  .chat-cta .t strong{font-weight:500;color:var(--ink)}
  .btn-chat{background:var(--accent);color:var(--paper);white-space:nowrap;border:0}
  .btn-chat:hover{background:var(--ink);transform:translateY(-1px)}
  @media (max-width:820px){
    .chat-cta{padding:22px;flex-direction:column;align-items:flex-start;gap:18px}
    .btn-chat{width:100%;justify-content:center}
  }

  /* footer */
  footer.foot{
    background:var(--ink);color:#bcb6a8;padding:36px 40px;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
    font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  }
  footer.foot a{color:#bcb6a8;border-bottom:1px solid transparent}
  footer.foot a:hover{color:var(--paper)}
  @media (max-width:820px){footer.foot{padding:28px 24px;flex-direction:column}}

  .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease}
  .reveal.in{opacity:1;transform:none}
  .try-line{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:center;margin:18px 0 16px;padding:14px;border:1px solid var(--rule);border-radius:10px;background:#fff}
  .try-line img{display:block;width:132px;height:132px}
  .try-line .k{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--copper);display:block;margin-bottom:6px}
  .try-line p{font-family:var(--tc);font-size:13px;line-height:1.7;color:var(--ink-soft);margin:0 0 10px}
  .try-line-btn{display:inline-block;padding:8px 14px;border-radius:999px;background:#06C755;color:#fff;font-family:var(--tc);font-weight:700;font-size:13px;transition:transform .2s,opacity .2s}
  .try-line-btn:hover{opacity:.9}
  .try-line-btn:active{transform:translateY(1px)}
  .case .dom:hover{color:var(--accent)}
  @media (max-width:520px){.try-line{grid-template-columns:96px 1fr}.try-line img{width:96px;height:96px}}
  .case-video video{aspect-ratio:720/1566;height:auto}
  .case-stack{display:flex;flex-direction:column;gap:24px;min-width:0}
  .case-stack .case{flex:0 0 auto}
  .skip{position:absolute;left:-9999px;top:0}
  .skip:focus{left:16px;top:16px;z-index:100;background:var(--ink);color:var(--paper);padding:8px 14px}
  .hero h1,.section-head h2{text-wrap:balance;line-break:strict}

/* ── 以下為 /ja/ 子頁共用(build_ja.py 產生的頁面)── */
.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);margin-bottom:28px;display:flex;flex-wrap:wrap;gap:6px}
.crumb a:hover{color:var(--accent)}
.crumb span[aria-hidden]{opacity:.5}
.hero.hero-sm{padding:150px 40px 56px}
.hero.hero-sm h1{font-size:clamp(28px,4vw,56px)}
@media (max-width:820px){.hero.hero-sm{padding:110px 24px 40px}}
.prose{max-width:760px;font-family:var(--tc);font-weight:300;font-size:17px;line-height:1.95;color:var(--ink-soft)}
.prose > * + *{margin-top:18px}
.prose h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.6vw,32px);line-height:1.35;color:var(--ink);margin-top:56px;letter-spacing:-.01em;text-wrap:balance}
.prose h3{font-family:var(--tc);font-weight:700;font-size:19px;line-height:1.5;color:var(--ink);margin-top:36px}
.prose strong{font-weight:500;color:var(--ink)}
.prose a{color:var(--accent);border-bottom:1px solid var(--accent-soft)}
.prose a:hover{border-bottom-color:var(--accent)}
.prose ul,.prose ol{padding-left:1.4em}
.prose li + li{margin-top:6px}
.prose blockquote{border-left:2px solid var(--copper);padding:4px 0 4px 18px;color:var(--ink)}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--paper-2);padding:1px 6px;border-radius:3px}
.prose .lead{font-size:19px;color:var(--ink)}
.prose .box{background:var(--accent-soft);border-left:2px solid var(--accent);padding:18px 22px}
.prose .note{font-size:14.5px;color:var(--muted)}
.tbl{overflow-x:auto}
.tbl table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px;line-height:1.7}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:12px 12px;border-bottom:1px solid var(--rule)}
.tbl th{font-family:var(--mono);font-size:12px;letter-spacing:.06em;font-weight:500;color:var(--muted);border-bottom:1px solid var(--ink)}
.tbl td:first-child{font-weight:500;color:var(--ink);white-space:nowrap}
.spec{display:grid;grid-template-columns:200px 1fr;border-top:1px solid var(--ink)}
.spec > div{padding:16px 0;border-bottom:1px solid var(--rule);font-family:var(--tc);font-size:16px;line-height:1.8}
.spec .k{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--muted);padding-top:19px}
@media (max-width:620px){.spec{grid-template-columns:1fr}.spec .k{border-bottom:0;padding-bottom:0}}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{display:flex;flex-direction:column;gap:10px;background:var(--paper-2);border:1px solid var(--rule);border-radius:10px;padding:24px 24px 22px;transition:border-color .3s,transform .3s}
a.card:hover{border-color:var(--accent-2);transform:translateY(-3px)}
.card .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--copper)}
.card h3{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.3}
.card p{font-family:var(--tc);font-weight:300;font-size:15px;line-height:1.8;color:var(--ink-soft)}
.card .go{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:12.5px;color:var(--accent)}
.next{margin-top:64px;padding-top:28px;border-top:1px solid var(--ink);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px}
.next .t{font-family:var(--tc);font-size:16px;color:var(--ink-soft);max-width:560px;line-height:1.8}
.reveal{opacity:1;transform:none}
nav.top ul{gap:22px;margin:0 28px}
.nav-langs{display:flex;gap:6px;margin-left:auto;margin-right:14px}
.nav-langs .nav-lang{margin-left:0}
@media (max-width:820px){.nav-langs{display:none}}
@media (max-width:1320px) and (min-width:821px){nav.top{padding:20px 24px}nav.top ul{gap:14px;margin:0 18px;font-size:11px}.nav-cta{display:none}}
@media (max-width:1040px) and (min-width:821px){.brand .en{font-size:15px}nav.top ul{gap:10px;margin:0 12px}}