// LP A — 王道案 (Classic / Trust)
// Editorial, restrained, deep forest + gold

const LPAClassic = () => {
  const [openFaq, setOpenFaq] = React.useState(0);
  const [heroNum, setHeroNum] = React.useState(0);
  const [form, setForm] = React.useState({ company: '', name: '', email: '', tel: '', message: '' });
  const [submitState, setSubmitState] = React.useState('idle'); // idle | sending | done | error
  const [submitError, setSubmitError] = React.useState('');

  const handleField = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (submitState === 'sending') return;
    if (!form.company || !form.name || !form.email) {
      setSubmitError('貴社名・ご担当者様お名前・メールアドレスは必須です。');
      setSubmitState('error');
      return;
    }
    setSubmitState('sending');
    setSubmitError('');
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (!res.ok) {
        const j = await res.json().catch(() => ({}));
        throw new Error(j.error || '送信に失敗しました');
      }
      setSubmitState('done');
    } catch (err) {
      setSubmitError(err.message || '送信に失敗しました。時間をおいて再度お試しください。');
      setSubmitState('error');
    }
  };

  React.useEffect(() => {
    const startDelay = 550; // sync with hero title fade-up
    const duration = 1400;
    const target = 50;
    let raf, startTime;
    const t1 = setTimeout(() => {
      const ease = (t) => 1 - Math.pow(1 - t, 3); // easeOutCubic
      const tick = (ts) => {
        if (!startTime) startTime = ts;
        const p = Math.min((ts - startTime) / duration, 1);
        setHeroNum(Math.round(ease(p) * target));
        if (p < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
    }, startDelay);
    return () => { clearTimeout(t1); if (raf) cancelAnimationFrame(raf); };
  }, []);

  return (
    <div style={lpaStyles.root} className="lpa-root">
      <style>{`
        .lpa-root a { word-break: keep-all; overflow-wrap: break-word; }
        @media (max-width: 768px) {
          .lpa-nav-links { display: none !important; }
          .lpa-utility-inner { font-size: 11px !important; padding: 0 16px !important; flex-wrap: wrap !important; gap: 8px !important; }
          .lpa-nav-inner { padding: 0 16px !important; }
          .lpa-container { padding: 0 16px !important; }
          .lpa-hero-inner { padding: 60px 16px 80px !important; }
          .lpa-hero-title { font-size: 28px !important; line-height: 1.5 !important; letter-spacing: 0.02em !important; }
          .lpa-hero-title-accent { font-size: 32px !important; letter-spacing: 0 !important; }
          .lpa-hero-title-sub { font-size: 16px !important; }
          .lpa-hero-lede { font-size: 14px !important; }
          .lpa-hero-stats { grid-template-columns: 1fr 1fr !important; gap: 0 !important; padding: 24px 0 !important; align-items: stretch !important; }
          .lpa-hero-stats > div { padding: 0 8px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; }
          .lpa-hero-stats > div > div:last-child { min-height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1.4 !important; }
          .lpa-hero-stat-num { font-size: 88px !important; }
          .lpa-hero-stat-num-emph { font-size: 88px !important; }
          .lpa-hero-ctas { flex-direction: column !important; gap: 12px !important; }
          .lpa-hero-ctas > * { width: 100% !important; }
          .lpa-pillars { padding: 0 !important; margin-top: 48px !important; background: transparent !important; border: none !important; }
          .lpa-pillars-row { grid-template-columns: 1fr !important; gap: 16px !important; }
          .lpa-pillar-divider { display: none !important; }
          .lpa-pillar-card { background: #FAFAF7 !important; border: 1px solid rgba(27,58,47,0.1) !important; padding: 0 0 24px 0 !important; overflow: hidden !important; }
          .lpa-pillar-image-slot { margin-bottom: 20px !important; height: 220px !important; }
          .lpa-pillar-tag { padding: 0 20px !important; font-size: 11px !important; margin-bottom: 8px !important; }
          .lpa-pillar-card .lpa-pillar-title { padding: 0 20px !important; font-size: 19px !important; white-space: normal !important; line-height: 1.4 !important; margin-bottom: 10px !important; }
          .lpa-pillar-body { padding: 0 20px !important; font-size: 14px !important; line-height: 1.7 !important; }
          .lpa-section-head { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
          .lpa-section-title { font-size: 28px !important; line-height: 1.5 !important; }
          .lpa-section-num { font-size: 12px !important; }
          .lpa-problem-grid { grid-template-columns: 1fr !important; }
          .lpa-what-section { padding: 80px 0 !important; }
          .lpa-values-section { padding: 80px 0 !important; }
          .lpa-value-row { grid-template-columns: 1fr !important; gap: 16px !important; }
          .lpa-value-big { font-size: 28px !important; }
          .lpa-value-big-num { font-size: 56px !important; }
          .lpa-sim-wrap { padding: 20px 16px !important; }
          .lpa-sim-head { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
          .lpa-sim-row { grid-template-columns: 1fr !important; gap: 12px !important; }
          .lpa-sim-arrow { transform: rotate(90deg) !important; }
          .lpa-sim-col-amount-num { font-size: 36px !important; }
          .lpa-sim-savings { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
          .lpa-sim-savings-amount { font-size: 28px !important; }
          .lpa-sim-savings-note { margin-left: 0 !important; }
          .lpa-flow-row { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; }
          .lpa-flow-node { flex: 0 0 auto !important; width: 160px !important; height: 160px !important; max-width: 160px !important; margin: 0 auto !important; }
          .lpa-flow-connector { flex: 0 0 auto !important; min-width: 0 !important; height: auto !important; width: auto !important; background: transparent !important; opacity: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 12px 0 !important; gap: 6px !important; position: relative !important; }
          .lpa-flow-connector-line { display: block !important; position: static !important; width: 1px !important; height: 24px !important; background: rgba(201,169,97,0.6) !important; opacity: 1 !important; }
          .lpa-flow-connector-label { position: static !important; transform: none !important; padding: 4px 10px !important; font-size: 10px !important; background: rgba(201,169,97,0.12) !important; color: #C9A961 !important; letter-spacing: 0.2em !important; border-radius: 2px !important; margin: 0 !important; }
          .lpa-flow-expert-col { flex: 0 0 auto !important; width: 100% !important; max-width: 240px !important; margin: 0 auto !important; }
          .lpa-compare-row { grid-template-columns: 1fr !important; padding: 0 !important; gap: 0 !important; border-bottom: none !important; margin-bottom: 16px !important; background: #FAFAF7 !important; border: 1px solid rgba(27,58,47,0.12) !important; border-radius: 6px !important; overflow: hidden !important; display: block !important; position: relative !important; }
          .lpa-compare-row > div { padding: 0 !important; }
          .lpa-compare-head { display: none !important; }
          .lpa-compare-cell-label { font-weight: 700 !important; color: #FAFAF7 !important; background: #1B3A2F !important; padding: 12px 14px !important; font-size: 12px !important; letter-spacing: 0.1em !important; text-align: center !important; border-bottom: none !important; opacity: 1 !important; }
          .lpa-compare-row::after { content: ''; position: absolute; left: 50%; top: 36px; bottom: 0; width: 1px; background: rgba(27,58,47,0.1); pointer-events: none; }
          .lpa-compare-cell { padding: 14px 12px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 6px !important; border-top: none !important; font-size: 14px !important; line-height: 1.4 !important; color: #1B3A2F !important; position: relative !important; min-height: 84px !important; float: left !important; width: 50% !important; box-sizing: border-box !important; }
          .lpa-compare-cell::before { content: attr(data-label); display: block !important; font-size: 9px !important; letter-spacing: 0.15em !important; font-weight: 600 !important; text-align: center !important; margin: 0 !important; min-width: 0 !important; }
          .lpa-compare-cell.lpa-compare-cell-us-mobile { background: rgba(201,169,97,0.1) !important; color: #1B3A2F !important; font-family: 'Cormorant Garamond', 'Noto Serif JP', serif !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0.01em !important; border-right: 1px solid rgba(27,58,47,0.08) !important; }
          .lpa-compare-cell.lpa-compare-cell-us-mobile::before { color: #C9A961 !important; font-weight: 700 !important; }
          .lpa-compare-row > .lpa-compare-cell:not(.lpa-compare-cell-us-mobile) { background: #FAFAF7 !important; color: rgba(27,58,47,0.7) !important; font-size: 13px !important; font-weight: 400 !important; }
          .lpa-compare-row > .lpa-compare-cell:not(.lpa-compare-cell-us-mobile)::before { color: rgba(27,58,47,0.5) !important; font-weight: 500 !important; }
          /* Hide 他社2 (b) */
          .lpa-compare-row > .lpa-compare-cell:last-child { display: none !important; }
          .lpa-compare-row::after { display: none !important; }
          .lpa-flow-steps { grid-template-columns: 1fr !important; gap: 24px !important; }
          .lpa-flow-step { display: grid !important; grid-template-columns: 56px 1fr !important; gap: 16px !important; align-items: start !important; padding: 16px 0 !important; border-bottom: 1px solid rgba(27,58,47,0.08) !important; text-align: left !important; }
          .lpa-flow-step-num { font-size: 28px !important; padding-bottom: 0 !important; border-bottom: 0 !important; margin-bottom: 0 !important; line-height: 1 !important; }
          .lpa-flow-step-title { font-size: 16px !important; margin-bottom: 4px !important; text-align: left !important; }
          .lpa-flow-step-desc { font-size: 13px !important; line-height: 1.7 !important; text-align: left !important; }
          .lpa-zero-split { grid-template-columns: 1fr !important; gap: 24px !important; }
          .lpa-zero-num { font-size: 100px !important; }
          .lpa-faq-q-text { font-size: 14px !important; }
          .lpa-final-inner { padding: 48px 20px !important; }
          .lpa-final-title { font-size: 28px !important; }
          .lpa-footer-inner { flex-direction: column !important; gap: 24px !important; align-items: flex-start !important; }
          .lpa-footer-links { flex-wrap: wrap !important; gap: 12px 16px !important; justify-content: flex-start !important; }
          .lpa-footer-bottom { flex-direction: column !important; gap: 16px !important; align-items: flex-start !important; text-align: left !important; }
        }
        @keyframes lpaFadeUp {
          0% { opacity: 0; transform: translateY(24px); }
          100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes lpaFadeIn {
          0% { opacity: 0; }
          100% { opacity: 1; }
        }
        @keyframes lpaLineGrow {
          0% { transform: scaleX(0); }
          100% { transform: scaleX(1); }
        }
        .lpa-anim { opacity: 0; animation: lpaFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
        .lpa-anim-1 { animation-delay: 0.1s; }
        .lpa-anim-2 { animation-delay: 0.3s; }
        .lpa-anim-3 { animation-delay: 0.55s; }
        .lpa-anim-4 { animation-delay: 0.8s; }
        .lpa-anim-5 { animation-delay: 1.0s; }
        .lpa-eyebrow-line-anim { transform-origin: left; animation: lpaLineGrow 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
        .lpa-eyebrow-line-anim.right { transform-origin: right; }
      `}</style>
      {/* Top utility bar */}
      <div style={lpaStyles.utility}>
        <div style={lpaStyles.utilityInner} className="lpa-utility-inner">
          <span><a href="https://halekula.co.jp/" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none' }}>株式会社ハレクラ</a></span>
          <span style={{ opacity: 0.5 }}>|</span>
          <span>東京都知事 (1) 第111830号</span>
          <span style={{ marginLeft: 'auto', opacity: 0.7 }}>法人のお客様向け</span>
        </div>
      </div>

      {/* Nav */}
      <nav style={lpaStyles.nav}>
        <div style={lpaStyles.navInner} className="lpa-nav-inner">
          <div style={lpaStyles.logo}>
            <span style={lpaStyles.logoMark}>H</span>
            <div>
              <div style={lpaStyles.logoName}>Halekula <span style={{ color: '#C9A961' }}>Benefit</span></div>
              <div style={lpaStyles.logoSub}>住まいの福利厚生</div>
            </div>
          </div>
          <div style={lpaStyles.navLinks} className="lpa-nav-links">
            <a style={{ ...lpaStyles.navLink, cursor: 'pointer' }} onClick={(e) => { e.preventDefault(); document.getElementById('about')?.scrollIntoView({ behavior: 'smooth' }); }}>サービス概要</a>
            <a style={{ ...lpaStyles.navLink, cursor: 'pointer' }} onClick={(e) => { e.preventDefault(); document.getElementById('values')?.scrollIntoView({ behavior: 'smooth' }); }}>2つの価値</a>
            <a style={{ ...lpaStyles.navLink, cursor: 'pointer' }} onClick={(e) => { e.preventDefault(); document.getElementById('flow')?.scrollIntoView({ behavior: 'smooth' }); }}>導入の流れ</a>
            <a style={{ ...lpaStyles.navLink, cursor: 'pointer' }} onClick={(e) => { e.preventDefault(); document.getElementById('faq')?.scrollIntoView({ behavior: 'smooth' }); }}>よくあるご質問</a>
            <button style={lpaStyles.navCta} onClick={() => document.getElementById('finalCta')?.scrollIntoView({ behavior: 'smooth' })}>資料請求</button>
          </div>
        </div>
      </nav>

      {/* Hero — main value front and center */}
      <section style={lpaStyles.hero}>
        <div style={lpaStyles.heroInner} className="lpa-hero-inner">
          <div style={lpaStyles.heroEyebrow} className="lpa-anim lpa-anim-1">
            <span style={lpaStyles.eyebrowLine} className="lpa-eyebrow-line-anim" />
            <span>住まいの福利厚生 — FOR CORPORATE CLIENTS</span>
            <span style={lpaStyles.eyebrowLine} className="lpa-eyebrow-line-anim right" />
          </div>
          <h1 style={lpaStyles.heroTitle} className="lpa-hero-title lpa-anim lpa-anim-2">
            <span style={{ display: 'inline-block', whiteSpace: 'nowrap' }}>従業員様の不動産売買、</span><br />
            <span style={lpaStyles.heroTitleAccent} className="lpa-hero-title-accent">仲介手数料 <span style={{ display: 'inline-block', minWidth: '1.3em', textAlign: 'right' }}>{heroNum}</span>%<span style={lpaStyles.heroTitleAccentSm}>OFF〜</span></span><br />
            <span style={lpaStyles.heroTitleSub} className="lpa-hero-title-sub">導入費・月額費用ゼロで、すぐに始められます。</span>
          </h1>
          <p style={lpaStyles.heroLede} className="lpa-hero-lede lpa-anim lpa-anim-3">
            一都三県の物件売買を、<strong style={lpaStyles.heroLedeStrong}>仲介手数料50%OFF〜(最大70%OFFまで)</strong>でサポート。<br />
            LINEから専用窓口へ、簡単にご相談いただけます。
          </p>
          <div style={lpaStyles.heroStats} className="lpa-hero-stats lpa-anim lpa-anim-4">
            {[
              { num: '50', unit: '%', sub: 'OFF〜', label: '仲介手数料割引', emph: true },
              { num: '0', unit: '円', sub: '', label: '貴社の導入費・月額' },
            ].map((s, i, arr) => (
              <div key={i} style={{ ...lpaStyles.heroStat, ...(i === arr.length - 1 ? { borderRight: 'none' } : {}) }}>
                <div style={lpaStyles.heroStatTop}>
                  {s.text ? (
                    <span style={lpaStyles.heroStatText}>{s.text}</span>
                  ) : (
                    <>
                      <span style={{ ...lpaStyles.heroStatNum, ...(s.emph ? lpaStyles.heroStatNumEmph : {}) }} className={s.emph ? 'lpa-hero-stat-num-emph' : 'lpa-hero-stat-num'}>{s.num}</span>
                      <span style={lpaStyles.heroStatUnit}>{s.unit}</span>
                    </>
                  )}
                  <span style={lpaStyles.heroStatSub}>{s.sub}</span>
                </div>
                <div style={lpaStyles.heroStatLabel}>{s.label}</div>
              </div>
            ))}
          </div>
          <div style={lpaStyles.heroCtas} className="lpa-hero-ctas lpa-anim lpa-anim-5">
            <button style={lpaStyles.ctaPrimary} onClick={() => document.getElementById('finalCta')?.scrollIntoView({ behavior: 'smooth' })}>資料請求<span style={{ marginLeft: 8 }}>→</span></button>
          </div>
          <div style={lpaStyles.heroFootnote}>
            ※ 売買対象物件は一都三県に限定/従業員様のお住まいは全国どちらでも可<br />
            ※ 50%OFF〜は当社規定の上限手数料からの割引率です
          </div>

          {/* Two pillars panel */}
          <div style={lpaStyles.pillars} className="lpa-pillars">
            <div style={lpaStyles.pillarsHead}>
              <span style={lpaStyles.pillarsLine} />
              <span style={lpaStyles.pillarsHeadText}>TWO PILLARS · 二本の柱</span>
              <span style={lpaStyles.pillarsLine} />
            </div>
            <div style={lpaStyles.pillarsRow} className="lpa-pillars-row">
              <div style={lpaStyles.pillarCard} className="lpa-pillar-card">
                <image-slot
                  id="lpa-pillar-main"
                  shape="rect"
                  class="lpa-pillar-image-slot"
                  style={{ width: '100%', height: '180px', marginBottom: '20px', display: 'block' }}
                  placeholder="不動産のイメージ写真をドラッグ"
                ></image-slot>
                <div style={lpaStyles.pillarTag} className="lpa-pillar-tag">SERVICE 01</div>
                <div style={lpaStyles.pillarTitle} className="lpa-pillar-title">不動産売買サポート</div>
                <div style={lpaStyles.pillarBody} className="lpa-pillar-body">
                  一都三県の売却・購入を仲介手数料<br />
                  <strong style={lpaStyles.pillarBodyStrong}>50%OFF〜(最大70%OFF)</strong>でご対応。
                </div>
              </div>
              <div style={lpaStyles.pillarDivider} className="lpa-pillar-divider" />
              <div style={lpaStyles.pillarCard} className="lpa-pillar-card">
                <image-slot
                  id="lpa-pillar-sub"
                  shape="rect"
                  class="lpa-pillar-image-slot"
                  style={{ width: '100%', height: '180px', marginBottom: '20px', display: 'block' }}
                  placeholder="相続相談のイメージ写真をドラッグ"
                ></image-slot>
                <div style={lpaStyles.pillarTag} className="lpa-pillar-tag">SERVICE 02</div>
                <div style={lpaStyles.pillarTitle} className="lpa-pillar-title">相続相談サポート</div>
                <div style={lpaStyles.pillarBody} className="lpa-pillar-body">
                  不動産に限らずご相談可能。<br />
                  従業員様の相続のお悩みに<strong style={lpaStyles.pillarBodyStrong}>ワンストップ</strong>で対応。
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* Decorative ornament */}
        <div style={lpaStyles.heroOrnament}>
          <svg width="180" height="180" viewBox="0 0 180 180" fill="none">
            <circle cx="90" cy="90" r="89" stroke="#C9A961" strokeWidth="0.5" />
            <circle cx="90" cy="90" r="60" stroke="#C9A961" strokeWidth="0.5" />
            <circle cx="90" cy="90" r="30" stroke="#C9A961" strokeWidth="0.5" />
            <path d="M90 1 L90 179 M1 90 L179 90" stroke="#C9A961" strokeWidth="0.3" />
          </svg>
        </div>
      </section>

      {/* Problem section */}
      <section id="about" style={lpaStyles.problem}>
        <div style={lpaStyles.container} className="lpa-container">
          <div style={lpaStyles.sectionHead} className="lpa-section-head">
            <div style={lpaStyles.sectionNum}>01</div>
            <div>
              <div style={lpaStyles.sectionEn}>The Challenge</div>
              <h2 style={lpaStyles.sectionTitle} className="lpa-section-title">"使われない福利厚生"に、心当たりはありませんか。</h2>
            </div>
          </div>
          <div style={lpaStyles.problemGrid} className="lpa-problem-grid">
            {[
              { icon: '住宅', title: '社員のライフイベントを支援したい', body: '住宅購入・住み替え・相続など、人生の節目に頼れる相談先を会社として用意したい。' },
              { icon: '採用', title: '採用競争で他社と差別化したい', body: '求人票に書ける具体的な福利厚生メニューが不足している。' },
              { icon: '稼働', title: '既存の福利厚生が使われていない', body: '大手サービスを導入したが、社員の利用率が把握できない。' },
              { icon: '効果', title: '福利厚生の費用対効果が見えにくい', body: '年間コストはかかるのに、利用実態と社員満足度が把握できない。' },
            ].map((p, i) => (
              <div key={i} style={lpaStyles.problemCard}>
                <div style={lpaStyles.problemIcon}>{p.icon}</div>
                <div style={lpaStyles.problemTitle}>{p.title}</div>
                <div style={lpaStyles.problemBody}>{p.body}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* What is it */}
      <section style={lpaStyles.what} className="lpa-what-section">
        <div style={lpaStyles.container} className="lpa-container">
          <div style={lpaStyles.sectionHead} className="lpa-section-head">
            <div style={lpaStyles.sectionNum}>02</div>
            <div>
              <div style={lpaStyles.sectionEnLight}>What is it</div>
              <h2 style={lpaStyles.sectionTitleLight} className="lpa-section-title">Halekula Benefit とは。</h2>
            </div>
          </div>
          <div style={lpaStyles.whatLede}>
            一都三県の不動産仲介に精通したハレクラが、貴社の<em style={lpaStyles.em}>専属窓口</em>として、<br />
            従業員様とそのご家族の住まい・相続のご相談に直接お応えします。
          </div>
          <div style={lpaStyles.flowDiagram} className="lpa-flow-row">
            <div style={lpaStyles.flowNode} className="lpa-flow-node">
              <div style={lpaStyles.flowNodeIcon}>従業員<br />ご家族</div>
            </div>
            <div style={lpaStyles.flowConnector} className="lpa-flow-connector">
              <div style={lpaStyles.flowConnectorLine} className="lpa-flow-connector-line" />
              <div style={lpaStyles.flowConnectorLabel} className="lpa-flow-connector-label">LINE一つで</div>
            </div>
            <div style={{ ...lpaStyles.flowNode, ...lpaStyles.flowNodeBrand }} className="lpa-flow-node">
              <div style={{ ...lpaStyles.flowNodeIcon, color: '#FAFAF7' }}>Halekula<br />Benefit</div>
              <div style={{ ...lpaStyles.flowNodeLabel, color: '#C9A961' }}>専属担当</div>
            </div>
            <div style={lpaStyles.flowConnector} className="lpa-flow-connector">
              <div style={lpaStyles.flowConnectorLine} className="lpa-flow-connector-line" />
              <div style={lpaStyles.flowConnectorLabel} className="lpa-flow-connector-label">ワンストップ</div>
            </div>
            <div style={lpaStyles.flowExpertCol} className="lpa-flow-expert-col">
              <div style={lpaStyles.flowExpert}>仲介事業部</div>
              <div style={lpaStyles.flowExpert}>提携税理士</div>
              <div style={lpaStyles.flowExpert}>提携司法書士</div>
              <div style={lpaStyles.flowExpert}>提携弁護士</div>
            </div>
          </div>
        </div>
      </section>

      {/* Two values */}
      <section id="values" style={lpaStyles.values} className="lpa-values-section">
        <div style={lpaStyles.container} className="lpa-container">
          <div style={lpaStyles.sectionHead} className="lpa-section-head">
            <div style={lpaStyles.sectionNum}>03</div>
            <div>
              <div style={lpaStyles.sectionEn}>Two Pillars</div>
              <h2 style={lpaStyles.sectionTitle} className="lpa-section-title">従業員様に提供する、二つの価値。</h2>
            </div>
          </div>

          <div style={lpaStyles.valueRow} className="lpa-value-row">
            <div style={lpaStyles.valueLabel}>
              <div style={lpaStyles.valueLabelTag}>SERVICE 01</div>
              <div style={lpaStyles.valueLabelKana}>売買</div>
            </div>
            <div style={lpaStyles.valueBody}>
              <h3 style={lpaStyles.valueTitle}>不動産売買サポート</h3>
              <div style={lpaStyles.valueBig}>
                仲介手数料 <span style={lpaStyles.valueBigNum}>50%</span> <span style={lpaStyles.valueBigUnit}>OFF〜</span>
              </div>
              <p style={lpaStyles.valueDesc}>
                条件により最大70%OFFまで対応。
                新築・中古マンション、戸建、土地まで一都三県の物件に対応。
              </p>
              <div style={lpaStyles.valueChips}>
                <span style={lpaStyles.chip}>新築マンション</span>
                <span style={lpaStyles.chip}>中古マンション</span>
                <span style={lpaStyles.chip}>戸建</span>
                <span style={lpaStyles.chip}>土地</span>
                <span style={lpaStyles.chip}>売却・購入両対応</span>
              </div>

              {/* Simulation */}
              <div style={lpaStyles.simWrap} className="lpa-sim-wrap">
                <div style={lpaStyles.simHead} className="lpa-sim-head">
                  <span style={lpaStyles.simEyebrow}>SIMULATION</span>
                  <span style={lpaStyles.simHeadTitle}>5,000万円の物件を購入する場合</span>
                </div>
                <div style={lpaStyles.simRow} className="lpa-sim-row">
                  <div style={lpaStyles.simCol}>
                    <div style={lpaStyles.simColTag}>一般的な仲介手数料</div>
                    <div style={lpaStyles.simColFormula}>(物件価格 × 3% + 6万円)</div>
                    <div style={lpaStyles.simColAmount}><span style={lpaStyles.simColAmountNum}>156</span><span style={lpaStyles.simColAmountUnit}>万円</span></div>
                  </div>
                  <div style={lpaStyles.simArrow} className="lpa-sim-arrow">→</div>
                  <div style={{ ...lpaStyles.simCol, ...lpaStyles.simColUs }}>
                    <div style={lpaStyles.simColTag}>Halekula Benefit</div>
                    <div style={lpaStyles.simColFormula}>(物件価格 × 1.5%)</div>
                    <div style={lpaStyles.simColAmount}><span style={{ ...lpaStyles.simColAmountNum, color: C.gold }}>75</span><span style={lpaStyles.simColAmountUnit}>万円</span></div>
                  </div>
                </div>
                <div style={lpaStyles.simSavings} className="lpa-sim-savings">
                  <span style={lpaStyles.simSavingsLabel}>差額</span>
                  <span style={lpaStyles.simSavingsAmount} className="lpa-sim-savings-amount">−81<span style={lpaStyles.simSavingsUnit}>万円</span></span>
                  <span style={lpaStyles.simSavingsNote} className="lpa-sim-savings-note">従業員様の負担軽減につながります。</span>
                </div>
                <div style={lpaStyles.simFootnote}>
                  ※ 上記金額はいずれも税抜表示です。別途消費税が加算されます。<br />
                  ※ 一般的な仲介手数料は宅地建物取引業法に定める速算式(売買代金800万円超の場合 物件価格×3%+6万円)に基づく上限額です。
                </div>
              </div>
            </div>
          </div>

          <div style={lpaStyles.valueDivider} />

          <div style={lpaStyles.valueRow} className="lpa-value-row">
            <div style={lpaStyles.valueLabel}>
              <div style={lpaStyles.valueLabelTag}>SERVICE 02</div>
              <div style={lpaStyles.valueLabelKana}>相続</div>
            </div>
            <div style={lpaStyles.valueBody}>
              <h3 style={lpaStyles.valueTitle}>相続のご相談窓口</h3>
              <div style={lpaStyles.valueBig}>
                税理士・司法書士・弁護士と<br />
                <span style={lpaStyles.valueBigUnit}>ワンストップ連携</span>
              </div>
              <p style={lpaStyles.valueDesc}>
                不動産に関わる内容に限らず、相続にまつわるあらゆるお悩みをまるっとご相談いただけます。
                提携の専門家ネットワークと連携し、ワンストップでサポートします。
              </p>
              <div style={lpaStyles.valueChips}>
                <span style={lpaStyles.chip}>相続全般のご相談</span>
                <span style={lpaStyles.chip}>不動産評価</span>
                <span style={lpaStyles.chip}>相続税対策</span>
                <span style={lpaStyles.chip}>名義変更</span>
                <span style={lpaStyles.chip}>賃貸活用</span>
                <span style={lpaStyles.chip}>売却検討</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Compare */}
      <section style={lpaStyles.compare}>
        <div style={lpaStyles.container} className="lpa-container">
          <div style={lpaStyles.sectionHead} className="lpa-section-head">
            <div style={lpaStyles.sectionNum}>04</div>
            <div>
              <div style={lpaStyles.sectionEn}>Comparison</div>
              <h2 style={lpaStyles.sectionTitle} className="lpa-section-title">他サービスとの違い。</h2>
            </div>
          </div>
          <div style={lpaStyles.compareTable}>
            <div style={lpaStyles.compareRow} className="lpa-compare-row lpa-compare-head">
              <div style={{ ...lpaStyles.compareCol, ...lpaStyles.compareColLabel }} />
              <div style={{ ...lpaStyles.compareCol, ...lpaStyles.compareColUs }}>
                <div style={lpaStyles.compareColTag}>本サービス</div>
                <div style={lpaStyles.compareColTitle}>Halekula Benefit</div>
              </div>
              <div style={lpaStyles.compareCol}>
                <div style={lpaStyles.compareColTag}>他サービス</div>
                <div style={lpaStyles.compareColTitleSm}>A社</div>
              </div>
              <div style={lpaStyles.compareCol}>
                <div style={lpaStyles.compareColTag}>他サービス</div>
                <div style={lpaStyles.compareColTitleSm}>B社</div>
              </div>
            </div>

            {[
              { label: '仲介手数料割引', us: '50% OFF〜(最大70%)', a: 'お祝い金 1万円程度', b: '会員優待 数%程度' },
              { label: '対象ご家族', us: '2親等内まで', a: '基本ご本人のみ', b: '1親等内まで' },
              { label: '相続・士業連携', us: 'ワンストップ対応', a: '別メニュー扱い', b: '対象外' },
              { label: '導入・月額費用', us: '無料', a: '従業員一人あたり月額', b: '個人会員制度' },
            ].map((row, i) => (
              <div key={i} style={lpaStyles.compareRow} className="lpa-compare-row">
                <div style={{ ...lpaStyles.compareCol, ...lpaStyles.compareColLabel }} className="lpa-compare-cell-label">{row.label}</div>
                <div style={{ ...lpaStyles.compareCol, ...lpaStyles.compareColUs, ...lpaStyles.compareCellUs }} className="lpa-compare-cell lpa-compare-cell-us-mobile" data-label="ハレクラベネフィット">{row.us}</div>
                <div style={lpaStyles.compareCol} className="lpa-compare-cell" data-label="一般的な仲介サービス">{row.a}</div>
                <div style={lpaStyles.compareCol} className="lpa-compare-cell" data-label="他社福利厚生">{row.b}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Flow */}
      <section id="flow" style={lpaStyles.flow}>
        <div style={lpaStyles.container} className="lpa-container">
          <div style={lpaStyles.sectionHead} className="lpa-section-head">
            <div style={lpaStyles.sectionNum}>05</div>
            <div>
              <div style={lpaStyles.sectionEn}>How it works</div>
              <h2 style={lpaStyles.sectionTitle} className="lpa-section-title">ご利用の流れ。</h2>
            </div>
          </div>
          <div style={lpaStyles.flowSteps} className="lpa-flow-steps">
            {[
              { n: '01', t: 'QRコードを受け取る', d: '会社から配布された案内チラシまたはイントラのQRコード' },
              { n: '02', t: 'LINEで友だち追加', d: 'Halekula Benefit 公式アカウントを追加(24時間受付)' },
              { n: '03', t: 'メッセージで相談', d: 'まずは雑談ベースから。来店も電話も不要' },
              { n: '04', t: '専属担当より返信', d: '平日10:00-18:00、専属担当より直接ご返信いたします' },
              { n: '05', t: '物件案内・専門家紹介', d: '必要に応じて来店・現地案内・士業面談へ' },
            ].map((s, i, arr) => (
              <div key={i} style={lpaStyles.flowStep} className="lpa-flow-step">
                <div style={lpaStyles.flowStepNum} className="lpa-flow-step-num">{s.n}</div>
                <div className="lpa-flow-step-content">
                <div style={lpaStyles.flowStepTitle} className="lpa-flow-step-title">{s.t}</div>
                <div style={lpaStyles.flowStepDesc} className="lpa-flow-step-desc">{s.d}</div>
                </div>
                {i < arr.length - 1 && <div style={lpaStyles.flowStepConnector} />}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Zero burden */}
      <section style={lpaStyles.zero}>
        <div style={lpaStyles.container} className="lpa-container">
          <div style={lpaStyles.zeroSplit} className="lpa-zero-split">
            <div style={lpaStyles.zeroLeft}>
              <div style={lpaStyles.sectionEnLight}>For HR Teams</div>
              <h2 style={lpaStyles.sectionTitleLight} className="lpa-section-title">
                人事ご担当者様の<br />ご負担は、ほぼゼロ。
              </h2>
              <p style={lpaStyles.zeroLede}>
                覚書1枚で導入可能。社内告知用の素材は当社が一式ご用意し、
                従業員様からの問い合わせも全て当社が直接対応します。
              </p>
            </div>
            <div style={lpaStyles.zeroRight}>
              {[
                { k: '導入費用', v: '無料' },
                { k: '月額費用', v: '無料' },
                { k: 'ご契約', v: '覚書1枚 / 即日開始' },
                { k: 'ご告知用素材', v: 'QRコード・チラシPDF・説明文一式' },
                { k: 'お問い合わせ対応', v: '全て当社が直接対応' },
                { k: '利用レポート', v: '四半期ごとに送付' },
              ].map((item, i) => (
                <div key={i} style={lpaStyles.zeroRow}>
                  <div style={lpaStyles.zeroKey}>{item.k}</div>
                  <div style={lpaStyles.zeroDot} />
                  <div style={lpaStyles.zeroVal}>{item.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section id="faq" style={lpaStyles.faq}>
        <div style={lpaStyles.container} className="lpa-container">
          <div style={lpaStyles.sectionHead} className="lpa-section-head">
            <div style={lpaStyles.sectionNum}>06</div>
            <div>
              <div style={lpaStyles.sectionEn}>FAQ</div>
              <h2 style={lpaStyles.sectionTitle} className="lpa-section-title">よくあるご質問。</h2>
            </div>
          </div>
          <div style={lpaStyles.faqList}>
            {[
              { q: '導入に費用はかかりますか?', a: '導入費用・月額費用ともに無料です。仲介取引が発生した際の手数料が当社の収益となります。' },
              { q: '契約手続きにどのくらい時間がかかりますか?', a: '覚書1枚で即日開始可能です。ご紹介制度として運用される場合は契約書すら不要です。' },
              { q: '社員の利用状況は把握できますか?', a: '半期ごとに「貴社で◯名がご利用、◯件成約」という形でレポートをお送りします。経営層への報告材料としてもご活用ください。' },
              { q: '物件は一都三県限定ですか?', a: '売買対象物件は一都三県(東京・神奈川・埼玉・千葉)に限定されますが、従業員様の居住地は全国どこでも問題ありません。' },
              { q: '大手の福利厚生サービスに既に加入していますが併用できますか?', a: '可能です。むしろ既存サービスを補完する形でご導入いただく企業様が多くございます。' },
              { q: '相続相談では実際にどんなことができますか?', a: '提携の税理士・司法書士・弁護士と連携して、評価・名義変更・売却・賃貸活用までワンストップで対応します。' },
              { q: 'LINE以外の連絡手段はありますか?', a: 'はい、ご希望に応じて電話・メール・対面でのご相談も承ります。' },
            ].map((item, i) => (
              <div key={i} style={lpaStyles.faqItem}>
                <button
                  style={lpaStyles.faqQ}
                  onClick={() => setOpenFaq(openFaq === i ? -1 : i)}
                >
                  <span style={lpaStyles.faqQMark}>Q</span>
                  <span style={lpaStyles.faqQText} className="lpa-faq-q-text">{item.q}</span>
                  <span style={{ ...lpaStyles.faqChev, transform: openFaq === i ? 'rotate(180deg)' : 'none' }}>⌃</span>
                </button>
                {openFaq === i && (
                  <div style={lpaStyles.faqA}>
                    <span style={lpaStyles.faqAMark}>A</span>
                    <span>{item.a}</span>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section id="finalCta" style={lpaStyles.finalCta}>
        <div style={lpaStyles.container} className="lpa-container">
          <div style={lpaStyles.finalCtaInner} className="lpa-final-inner">
            <div style={lpaStyles.finalCtaEyebrow}>Get Started</div>
            <h2 style={lpaStyles.finalCtaTitle} className="lpa-final-title">
              まずは資料を、<br />お受け取りください。
            </h2>
            <p style={lpaStyles.finalCtaLede}>
              制度の概要・社内告知用素材のサンプル・導入企業様の声を1冊にまとめました。<br />
              ご担当者様のお名前・メールアドレスのみでお取り寄せいただけます。
            </p>
            {submitState === 'done' ? (
              <div style={{ ...lpaStyles.finalCtaForm, textAlign: 'center', padding: '40px 24px', background: 'rgba(201,169,97,0.08)', borderRadius: 4 }}>
                <div style={{ fontFamily: 'Cormorant Garamond, serif', fontStyle: 'italic', color: '#C9A961', fontSize: 14, letterSpacing: '0.2em', marginBottom: 16 }}>Thank you</div>
                <div style={{ fontSize: 18, color: '#1B3A2F', fontWeight: 600, lineHeight: 1.7 }}>資料請求を承りました。<br />後ほど担当者より資料をお送りさせていただきます。</div>
              </div>
            ) : (
              <form style={lpaStyles.finalCtaForm} onSubmit={handleSubmit} noValidate>
                <input style={lpaStyles.finalInput} placeholder="貴社名" value={form.company} onChange={handleField('company')} required />
                <input style={lpaStyles.finalInput} placeholder="ご担当者様お名前" value={form.name} onChange={handleField('name')} required />
                <input style={lpaStyles.finalInput} placeholder="メールアドレス" type="email" value={form.email} onChange={handleField('email')} required />
                <input style={lpaStyles.finalInput} placeholder="お電話番号" type="tel" value={form.tel} onChange={handleField('tel')} />
                <textarea style={{ ...lpaStyles.finalInput, minHeight: 120, resize: 'vertical', fontFamily: 'inherit' }} placeholder="ご質問・ご相談内容(任意)" value={form.message} onChange={handleField('message')} />
                {submitState === 'error' && (
                  <div style={{ color: '#C0392B', fontSize: 13, textAlign: 'center', marginTop: -8 }}>{submitError}</div>
                )}
                <button type="submit" style={{ ...lpaStyles.finalSubmit, opacity: submitState === 'sending' ? 0.6 : 1, cursor: submitState === 'sending' ? 'wait' : 'pointer' }} disabled={submitState === 'sending'}>
                  {submitState === 'sending' ? '送信中…' : '資料請求→'}
                </button>
              </form>
            )}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer style={lpaStyles.footer}>
        <div style={lpaStyles.container} className="lpa-container">
          <div style={lpaStyles.footerTop} className="lpa-footer-top">
            <div>
              <div style={lpaStyles.footerLogo}>Halekula <span style={{ color: '#C9A961' }}>Benefit</span></div>
              <div style={lpaStyles.footerSub}>住まいの福利厚生</div>
            </div>
            <div style={lpaStyles.footerLinks} className="lpa-footer-links">
              <a href="#about" style={lpaStyles.footerLink}>サービス概要</a>
              <a href="#values" style={lpaStyles.footerLink}>2つの価値</a>
              <a href="#flow" style={lpaStyles.footerLink}>導入の流れ</a>
              <a href="#faq" style={lpaStyles.footerLink}>FAQ</a>
              <a href="terms.html" style={{ ...lpaStyles.footerLink, cursor: 'pointer' }}>利用規約</a>
              <a href="privacy.html" style={{ ...lpaStyles.footerLink, cursor: 'pointer' }}>プライバシーポリシー</a>
            </div>
          </div>
          <div style={lpaStyles.footerCompany}>
            <div><a href="https://halekula.co.jp/" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none', borderBottom: '1px solid currentColor', paddingBottom: 1 }}>株式会社ハレクラ / Halekula Inc.</a></div>
            <div>東京都渋谷区道玄坂2-18-11 / 宅地建物取引業 東京都知事(1)第111830号</div>
          </div>
          <div style={lpaStyles.footerNote}>
            ※「50%OFF〜」は当社規定の上限手数料からの割引率です。/ ※サービス内容は予告なく変更する場合があります。
          </div>
          <div style={lpaStyles.footerCopy}>
            © 2026 Halekula Inc. All rights reserved.
          </div>
        </div>
      </footer>
    </div>
  );
};

const C = {
  bg: '#FAFAF7',
  bgAlt: '#F2EFE8',
  ink: '#1A1814',
  inkSoft: '#5A5347',
  inkMuted: '#8A8175',
  brand: '#1B3A2F',
  brand2: '#244C3D',
  gold: '#C9A961',
  goldDeep: '#A88542',
  border: '#E5E0D5',
  serif: '"Noto Serif JP", "Yu Mincho", serif',
  sans: '"Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif',
  display: '"Cormorant Garamond", "Noto Serif JP", serif',
};

const lpaStyles = {
  root: {
    fontFamily: C.sans,
    color: C.ink,
    background: C.bg,
    fontSize: 15,
    lineHeight: 1.7,
    letterSpacing: '0.01em',
  },
  utility: {
    background: C.brand,
    color: '#E5E0D5',
    fontSize: 12,
    padding: '8px 0',
    letterSpacing: '0.05em',
  },
  utilityInner: {
    maxWidth: 1200,
    margin: '0 auto',
    padding: '0 32px',
    display: 'flex',
    gap: 16,
    alignItems: 'center',
  },
  nav: {
    background: C.bg,
    borderBottom: `1px solid ${C.border}`,
    position: 'sticky',
    top: 0,
    zIndex: 50,
  },
  navInner: {
    maxWidth: 1200,
    margin: '0 auto',
    padding: '20px 32px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  logo: {
    display: 'flex',
    alignItems: 'center',
    gap: 12,
  },
  logoMark: {
    width: 40,
    height: 40,
    borderRadius: 4,
    background: C.brand,
    color: C.gold,
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontFamily: C.display,
    fontSize: 24,
    fontWeight: 600,
    fontStyle: 'italic',
    paddingRight: 4,
    lineHeight: 1,
  },
  logoName: {
    fontFamily: C.serif,
    fontSize: 18,
    fontWeight: 700,
    color: C.ink,
    letterSpacing: '0.02em',
    lineHeight: 1.2,
    whiteSpace: 'nowrap',
  },
  logoSub: {
    fontSize: 11,
    color: C.inkMuted,
    letterSpacing: '0.1em',
    marginTop: 2,
    whiteSpace: 'nowrap',
    textAlign: 'center',
  },
  navLinks: {
    display: 'flex',
    alignItems: 'center',
    gap: 28,
  },
  navLink: {
    fontSize: 13,
    color: C.inkSoft,
    cursor: 'pointer',
    letterSpacing: '0.04em',
  },
  navCta: {
    background: C.brand,
    color: C.bg,
    border: 'none',
    padding: '12px 22px',
    fontSize: 13,
    fontWeight: 500,
    cursor: 'pointer',
    letterSpacing: '0.05em',
    fontFamily: C.sans,
    borderRadius: 2,
  },

  // HERO
  hero: {
    position: 'relative',
    padding: '120px 32px 100px',
    textAlign: 'center',
    overflow: 'hidden',
    background: `radial-gradient(ellipse at top, ${C.bgAlt} 0%, ${C.bg} 60%)`,
  },
  heroInner: {
    maxWidth: 920,
    margin: '0 auto',
    position: 'relative',
    zIndex: 2,
  },
  heroEyebrow: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 16,
    fontSize: 14,
    letterSpacing: '0.3em',
    color: C.goldDeep,
    fontFamily: C.display,
    fontWeight: 500,
    marginBottom: 32,
  },
  eyebrowLine: {
    width: 32,
    height: 1,
    background: C.gold,
  },
  heroTitle: {
    fontFamily: C.serif,
    fontSize: 44,
    fontWeight: 700,
    lineHeight: 1.4,
    margin: 0,
    letterSpacing: '0.03em',
    color: C.brand,
  },
  heroTitleAccent: {
    display: 'inline-block',
    fontFamily: C.serif,
    fontSize: 96,
    fontWeight: 900,
    color: C.brand,
    letterSpacing: '0.01em',
    lineHeight: 1.15,
    marginTop: 12,
    marginBottom: 8,
    whiteSpace: 'nowrap',
  },
  heroTitleAccentSm: {
    fontFamily: C.display,
    fontStyle: 'italic',
    fontSize: 56,
    fontWeight: 600,
    color: C.goldDeep,
    marginLeft: 8,
    letterSpacing: '0.02em',
  },
  heroTitleSub: {
    display: 'inline-block',
    fontFamily: C.serif,
    fontSize: 26,
    fontWeight: 500,
    color: C.inkSoft,
    letterSpacing: '0.04em',
    marginTop: 12,
  },
  heroLede: {
    marginTop: 32,
    fontSize: 16,
    lineHeight: 2,
    color: C.inkSoft,
    letterSpacing: '0.06em',
  },
  heroLedeStrong: {
    color: C.brand,
    fontWeight: 700,
    borderBottom: `1px solid ${C.gold}`,
    paddingBottom: 2,
  },
  heroStats: {
    marginTop: 56,
    display: 'grid',
    gridTemplateColumns: 'repeat(2, 1fr)',
    borderTop: `1px solid ${C.border}`,
    borderBottom: `1px solid ${C.border}`,
    padding: '56px 0',
  },
  heroStat: {
    textAlign: 'center',
    borderRight: `1px solid ${C.border}`,
    padding: '0 24px',
  },
  heroStatTop: {
    display: 'flex',
    alignItems: 'baseline',
    justifyContent: 'center',
    gap: 4,
  },
  heroStatNum: {
    fontFamily: C.display,
    fontSize: 88,
    fontWeight: 700,
    color: C.brand,
    letterSpacing: '-0.02em',
    lineHeight: 1,
    fontStyle: 'italic',
  },
  heroStatNumEmph: {
    color: C.goldDeep,
    fontSize: 112,
  },
  heroStatText: {
    fontFamily: C.serif,
    fontSize: 56,
    fontWeight: 700,
    color: C.brand,
    letterSpacing: '0.04em',
    lineHeight: 1,
  },
  heroStatUnit: {
    fontFamily: C.serif,
    fontSize: 22,
    color: C.brand,
    fontWeight: 700,
    marginLeft: 2,
  },
  heroStatSub: {
    fontFamily: C.serif,
    fontSize: 14,
    color: C.goldDeep,
    fontWeight: 500,
    marginLeft: 4,
  },
  heroFootnote: {
    marginTop: 32,
    fontSize: 11,
    color: C.inkMuted,
    lineHeight: 1.9,
    letterSpacing: '0.04em',
  },
  pillars: {
    marginTop: 80,
  },
  pillarsHead: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 16,
    fontFamily: C.display,
    fontStyle: 'italic',
    fontSize: 12,
    color: C.goldDeep,
    letterSpacing: '0.25em',
    fontWeight: 500,
    marginBottom: 24,
  },
  pillarsHeadText: {
    whiteSpace: 'nowrap',
  },
  pillarsLine: {
    width: 32,
    height: 1,
    background: C.gold,
  },
  pillarsRow: {
    display: 'grid',
    gridTemplateColumns: '1fr 1px 1fr',
    gap: 32,
    alignItems: 'stretch',
    border: `1px solid ${C.border}`,
    background: C.bg,
    padding: '32px 40px',
  },
  pillarCard: {
    textAlign: 'left',
  },
  pillarDivider: {
    background: C.border,
  },
  pillarTag: {
    fontFamily: C.display,
    fontStyle: 'italic',
    fontSize: 11,
    color: C.goldDeep,
    letterSpacing: '0.25em',
    fontWeight: 600,
    marginBottom: 12,
  },
  pillarTitle: {
    fontFamily: C.serif,
    fontSize: 22,
    fontWeight: 700,
    color: C.brand,
    marginBottom: 12,
    letterSpacing: '0.04em',
    whiteSpace: 'nowrap',
  },
  pillarBody: {
    fontSize: 14,
    color: C.inkSoft,
    lineHeight: 1.9,
    letterSpacing: '0.03em',
  },
  pillarBodyStrong: {
    color: C.brand,
    fontWeight: 700,
  },
  heroStatLabel: {
    marginTop: 8,
    fontSize: 12,
    color: C.inkMuted,
    letterSpacing: '0.15em',
  },
  heroCtas: {
    marginTop: 48,
    display: 'flex',
    gap: 16,
    justifyContent: 'center',
  },
  ctaPrimary: {
    background: C.brand,
    color: C.bg,
    border: 'none',
    padding: '18px 36px',
    fontSize: 15,
    fontWeight: 500,
    cursor: 'pointer',
    letterSpacing: '0.08em',
    fontFamily: C.sans,
    borderRadius: 2,
  },
  ctaGhost: {
    background: 'transparent',
    color: C.ink,
    border: `1px solid ${C.ink}`,
    padding: '18px 36px',
    fontSize: 15,
    fontWeight: 500,
    cursor: 'pointer',
    letterSpacing: '0.08em',
    fontFamily: C.sans,
    borderRadius: 2,
  },
  heroOrnament: {
    position: 'absolute',
    top: 80,
    right: 80,
    opacity: 0.6,
    pointerEvents: 'none',
  },

  // Container + section heads
  container: {
    maxWidth: 1200,
    margin: '0 auto',
    padding: '0 32px',
  },
  sectionHead: {
    display: 'flex',
    alignItems: 'flex-start',
    gap: 32,
    marginBottom: 64,
  },
  sectionNum: {
    fontFamily: C.display,
    fontStyle: 'italic',
    fontSize: 56,
    color: C.gold,
    fontWeight: 500,
    lineHeight: 1,
  },
  sectionEn: {
    fontFamily: C.display,
    fontStyle: 'italic',
    fontSize: 14,
    color: C.goldDeep,
    letterSpacing: '0.15em',
    marginBottom: 8,
  },
  sectionEnLight: {
    fontFamily: C.display,
    fontStyle: 'italic',
    fontSize: 14,
    color: C.gold,
    letterSpacing: '0.15em',
    marginBottom: 8,
  },
  sectionTitle: {
    fontFamily: C.serif,
    fontSize: 36,
    fontWeight: 700,
    margin: 0,
    color: C.brand,
    letterSpacing: '0.04em',
  },
  sectionTitleLight: {
    fontFamily: C.serif,
    fontSize: 36,
    fontWeight: 700,
    margin: 0,
    color: C.bg,
    letterSpacing: '0.04em',
  },

  // Problem
  problem: {
    padding: '120px 0',
    background: C.bg,
  },
  problemGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(2, 1fr)',
    gap: 1,
    background: C.border,
    border: `1px solid ${C.border}`,
  },
  problemCard: {
    background: C.bg,
    padding: '40px 36px',
  },
  problemIcon: {
    display: 'inline-block',
    fontFamily: C.serif,
    fontSize: 14,
    color: C.bg,
    background: C.brand,
    padding: '4px 12px',
    borderRadius: 2,
    marginBottom: 20,
    letterSpacing: '0.1em',
  },
  problemTitle: {
    fontFamily: C.serif,
    fontSize: 20,
    fontWeight: 700,
    color: C.ink,
    marginBottom: 12,
    letterSpacing: '0.02em',
  },
  problemBody: {
    fontSize: 14,
    color: C.inkSoft,
    lineHeight: 1.9,
  },

  // What is it (dark)
  what: {
    padding: '120px 0',
    background: C.brand,
    color: C.bg,
  },
  whatLede: {
    fontFamily: C.serif,
    fontSize: 22,
    lineHeight: 2.1,
    color: C.bg,
    marginBottom: 80,
    paddingLeft: 88,
    letterSpacing: '0.04em',
  },
  em: {
    color: C.gold,
    fontStyle: 'normal',
    fontWeight: 700,
    borderBottom: `1px solid ${C.gold}`,
    paddingBottom: 2,
  },
  flowDiagram: {
    display: 'flex',
    alignItems: 'center',
    gap: 24,
    padding: '40px 0',
    borderTop: `1px solid rgba(201,169,97,0.3)`,
    borderBottom: `1px solid rgba(201,169,97,0.3)`,
  },
  flowNode: {
    flex: '0 0 160px',
    height: 160,
    border: `1px solid ${C.gold}`,
    borderRadius: '50%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    background: 'rgba(201,169,97,0.05)',
    padding: '24px 12px 32px',
    boxSizing: 'border-box',
  },
  flowNodeBrand: {
    background: C.gold,
    border: `1px solid ${C.gold}`,
  },
  flowNodeIcon: {
    fontFamily: C.serif,
    fontSize: 16,
    fontWeight: 700,
    color: C.gold,
    textAlign: 'center',
    lineHeight: 1.2,
  },
  flowNodeLabel: {
    fontSize: 10,
    color: C.gold,
    letterSpacing: '0.2em',
  },
  flowConnector: {
    flex: 1,
    position: 'relative',
    height: 2,
    background: C.gold,
    opacity: 0.5,
    minWidth: 40,
  },
  flowConnectorLine: { display: 'none' },
  flowConnectorLabel: {
    position: 'absolute',
    bottom: '100%',
    left: '50%',
    transform: 'translateX(-50%)',
    fontSize: 10,
    color: C.gold,
    letterSpacing: '0.2em',
    whiteSpace: 'nowrap',
    marginBottom: 8,
  },
  flowExpertCol: {
    flex: '0 0 200px',
    display: 'flex',
    flexDirection: 'column',
    gap: 6,
  },
  flowExpert: {
    border: `1px solid rgba(201,169,97,0.5)`,
    padding: '10px 16px',
    fontSize: 13,
    color: C.bg,
    fontFamily: C.serif,
    fontWeight: 500,
    letterSpacing: '0.05em',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
  },

  // Values
  values: {
    padding: '120px 0',
    background: C.bg,
  },
  valueRow: {
    display: 'grid',
    gridTemplateColumns: '160px 1fr',
    gap: 64,
    alignItems: 'flex-start',
    padding: '48px 0',
  },
  valueDivider: {
    height: 1,
    background: C.border,
  },
  valueLabel: {
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
  },
  valueLabelTag: {
    fontFamily: C.display,
    fontStyle: 'italic',
    fontSize: 13,
    color: C.goldDeep,
    letterSpacing: '0.2em',
  },
  valueLabelKana: {
    fontFamily: C.serif,
    fontSize: 80,
    fontWeight: 700,
    color: C.gold,
    lineHeight: 1,
    opacity: 0.4,
  },
  valueBody: {},
  valueTitle: {
    fontFamily: C.serif,
    fontSize: 32,
    fontWeight: 700,
    color: C.brand,
    margin: 0,
    marginBottom: 24,
    letterSpacing: '0.04em',
  },
  valueBig: {
    fontFamily: C.serif,
    fontSize: 28,
    fontWeight: 500,
    color: C.ink,
    lineHeight: 1.5,
    marginBottom: 24,
    paddingBottom: 24,
    borderBottom: `1px solid ${C.border}`,
  },
  valueBigNum: {
    fontFamily: C.display,
    fontStyle: 'italic',
    fontSize: 80,
    fontWeight: 600,
    color: C.gold,
    lineHeight: 1,
    margin: '0 4px',
  },
  valueBigUnit: {
    color: C.goldDeep,
    fontWeight: 700,
  },
  valueDesc: {
    fontSize: 15,
    color: C.inkSoft,
    lineHeight: 1.9,
    marginBottom: 24,
  },
  valueChips: {
    display: 'flex',
    gap: 8,
    flexWrap: 'wrap',
  },
  chip: {
    padding: '6px 14px',
    border: `1px solid ${C.border}`,
    fontSize: 12,
    color: C.inkSoft,
    letterSpacing: '0.05em',
    borderRadius: 999,
  },

  // Simulation
  simWrap: {
    marginTop: 40,
    border: `1px solid ${C.border}`,
    background: '#FFFFFF',
    padding: '32px 36px',
  },
  simHead: {
    display: 'flex',
    alignItems: 'baseline',
    gap: 16,
    paddingBottom: 20,
    marginBottom: 24,
    borderBottom: `1px solid ${C.border}`,
  },
  simEyebrow: {
    fontFamily: C.display,
    fontStyle: 'italic',
    fontSize: 13,
    color: C.gold,
    letterSpacing: '0.2em',
  },
  simHeadTitle: {
    fontFamily: C.serif,
    fontSize: 18,
    fontWeight: 700,
    color: C.ink,
    letterSpacing: '0.04em',
  },
  simRow: {
    display: 'grid',
    gridTemplateColumns: '1fr 40px 1fr',
    alignItems: 'center',
    gap: 16,
  },
  simCol: {
    padding: '20px 24px',
    border: `1px solid ${C.border}`,
    background: 'rgba(224,221,211,0.15)',
  },
  simColUs: {
    background: 'rgba(201,169,97,0.08)',
    border: `1px solid ${C.gold}`,
  },
  simColTag: {
    fontSize: 11,
    color: C.inkMuted,
    letterSpacing: '0.15em',
    marginBottom: 6,
  },
  simColFormula: {
    fontSize: 12,
    color: C.inkSoft,
    fontFamily: C.display,
    fontStyle: 'italic',
    marginBottom: 12,
  },
  simColAmount: {
    display: 'flex',
    alignItems: 'baseline',
    gap: 4,
  },
  simColAmountNum: {
    fontFamily: C.serif,
    fontSize: 44,
    fontWeight: 700,
    color: C.ink,
    letterSpacing: '0.02em',
  },
  simColAmountUnit: {
    fontSize: 14,
    color: C.inkSoft,
  },
  simArrow: {
    fontSize: 24,
    color: C.gold,
    textAlign: 'center',
  },
  simSavings: {
    marginTop: 24,
    padding: '20px 24px',
    background: C.brand,
    color: C.bg,
    display: 'flex',
    alignItems: 'baseline',
    gap: 16,
    flexWrap: 'wrap',
  },
  simSavingsLabel: {
    fontFamily: C.display,
    fontStyle: 'italic',
    fontSize: 13,
    color: C.gold,
    letterSpacing: '0.2em',
  },
  simSavingsAmount: {
    fontFamily: C.serif,
    fontSize: 36,
    fontWeight: 700,
    color: C.gold,
    letterSpacing: '0.02em',
  },
  simSavingsUnit: {
    fontSize: 16,
    marginLeft: 4,
  },
  simSavingsNote: {
    fontSize: 13,
    color: C.bg,
    opacity: 0.85,
    marginLeft: 'auto',
  },
  simFootnote: {
    marginTop: 16,
    fontSize: 11,
    color: C.inkMuted,
    lineHeight: 1.7,
    letterSpacing: '0.02em',
  },

  // Compare
  compare: {
    padding: '120px 0',
    background: C.bgAlt,
  },
  compareTable: {
    background: C.bg,
    border: `1px solid ${C.border}`,
  },
  compareRow: {
    display: 'grid',
    gridTemplateColumns: '200px 1fr 1fr 1fr',
    borderBottom: `1px solid ${C.border}`,
  },
  compareCol: {
    padding: '20px 24px',
    fontSize: 14,
    color: C.inkSoft,
    borderRight: `1px solid ${C.border}`,
  },
  compareColLabel: {
    background: C.bgAlt,
    fontWeight: 700,
    color: C.ink,
    fontFamily: C.serif,
    fontSize: 14,
  },
  compareColUs: {
    background: 'rgba(27,58,47,0.04)',
  },
  compareCellUs: {
    color: C.brand,
    fontWeight: 700,
  },
  compareColTag: {
    fontFamily: C.display,
    fontStyle: 'italic',
    fontSize: 11,
    color: C.goldDeep,
    letterSpacing: '0.2em',
    marginBottom: 6,
  },
  compareColTitle: {
    fontFamily: C.serif,
    fontSize: 16,
    fontWeight: 700,
    color: C.brand,
  },
  compareColTitleSm: {
    fontFamily: C.serif,
    fontSize: 14,
    color: C.inkSoft,
  },

  // Flow steps
  flow: {
    padding: '120px 0',
    background: C.bg,
  },
  flowSteps: {
    display: 'grid',
    gridTemplateColumns: 'repeat(5, 1fr)',
    gap: 0,
    position: 'relative',
  },
  flowStep: {
    position: 'relative',
    padding: '0 16px',
  },
  flowStepNum: {
    fontFamily: C.display,
    fontStyle: 'italic',
    fontSize: 36,
    color: C.gold,
    fontWeight: 500,
    marginBottom: 16,
    paddingBottom: 16,
    borderBottom: `1px solid ${C.border}`,
  },
  flowStepTitle: {
    fontFamily: C.serif,
    fontSize: 16,
    fontWeight: 700,
    color: C.ink,
    marginBottom: 8,
    lineHeight: 1.5,
    letterSpacing: '0.02em',
  },
  flowStepDesc: {
    fontSize: 12,
    color: C.inkSoft,
    lineHeight: 1.8,
  },
  flowStepConnector: {
    position: 'absolute',
    top: 18,
    right: -8,
    width: 16,
    height: 1,
    background: C.gold,
  },

  // Zero
  zero: {
    padding: '120px 0',
    background: C.brand,
  },
  zeroSplit: {
    display: 'grid',
    gridTemplateColumns: '1fr 1.2fr',
    gap: 80,
    alignItems: 'flex-start',
  },
  zeroLeft: {},
  zeroLede: {
    marginTop: 32,
    fontSize: 15,
    color: 'rgba(250,250,247,0.8)',
    lineHeight: 2,
  },
  zeroRight: {
    background: 'rgba(201,169,97,0.08)',
    border: `1px solid rgba(201,169,97,0.3)`,
    padding: '8px 32px',
  },
  zeroRow: {
    display: 'flex',
    alignItems: 'center',
    gap: 16,
    padding: '20px 0',
    borderBottom: `1px solid rgba(201,169,97,0.2)`,
  },
  zeroKey: {
    fontFamily: C.serif,
    fontSize: 14,
    color: C.bg,
    flex: '0 0 160px',
    letterSpacing: '0.05em',
  },
  zeroDot: {
    flex: 1,
    height: 1,
    background: 'rgba(201,169,97,0.3)',
  },
  zeroVal: {
    fontFamily: C.serif,
    fontSize: 16,
    fontWeight: 700,
    color: C.gold,
    letterSpacing: '0.04em',
  },

  // FAQ
  faq: {
    padding: '120px 0',
    background: C.bg,
  },
  faqList: {
    maxWidth: 880,
    margin: '0 auto',
    borderTop: `1px solid ${C.border}`,
  },
  faqItem: {
    borderBottom: `1px solid ${C.border}`,
  },
  faqQ: {
    width: '100%',
    background: 'transparent',
    border: 'none',
    padding: '24px 0',
    display: 'flex',
    alignItems: 'center',
    gap: 20,
    cursor: 'pointer',
    fontFamily: C.sans,
    textAlign: 'left',
  },
  faqQMark: {
    fontFamily: C.display,
    fontStyle: 'italic',
    fontSize: 20,
    color: C.gold,
    flex: '0 0 20px',
  },
  faqQText: {
    flex: 1,
    fontFamily: C.serif,
    fontSize: 16,
    fontWeight: 700,
    color: C.ink,
    letterSpacing: '0.02em',
  },
  faqChev: {
    color: C.inkMuted,
    transition: 'transform 0.2s',
    fontSize: 18,
    display: 'inline-block',
  },
  faqA: {
    padding: '0 0 24px 40px',
    display: 'flex',
    gap: 20,
    fontSize: 14,
    color: C.inkSoft,
    lineHeight: 1.9,
  },
  faqAMark: {
    fontFamily: C.display,
    fontStyle: 'italic',
    fontSize: 20,
    color: C.goldDeep,
    flex: '0 0 20px',
    marginLeft: -40,
  },

  // Final CTA
  finalCta: {
    padding: '120px 0',
    background: C.bgAlt,
  },
  finalCtaInner: {
    maxWidth: 720,
    margin: '0 auto',
    textAlign: 'center',
  },
  finalCtaEyebrow: {
    fontFamily: C.display,
    fontStyle: 'italic',
    fontSize: 14,
    color: C.goldDeep,
    letterSpacing: '0.2em',
    marginBottom: 24,
  },
  finalCtaTitle: {
    fontFamily: C.serif,
    fontSize: 48,
    fontWeight: 700,
    color: C.brand,
    margin: 0,
    lineHeight: 1.4,
    letterSpacing: '0.04em',
  },
  finalCtaLede: {
    marginTop: 24,
    fontSize: 14,
    color: C.inkSoft,
    lineHeight: 2,
  },
  finalCtaForm: {
    marginTop: 48,
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
  },
  finalInput: {
    padding: '16px 20px',
    border: `1px solid ${C.border}`,
    background: C.bg,
    fontSize: 14,
    fontFamily: C.sans,
    color: C.ink,
    borderRadius: 2,
  },
  finalSubmit: {
    background: C.brand,
    color: C.bg,
    border: 'none',
    padding: '20px',
    fontSize: 15,
    fontWeight: 500,
    cursor: 'pointer',
    letterSpacing: '0.1em',
    fontFamily: C.sans,
    marginTop: 8,
    borderRadius: 2,
  },
  finalAlt: {
    marginTop: 24,
    fontSize: 13,
    color: C.inkSoft,
  },
  finalAltLink: {
    color: C.brand,
    fontWeight: 700,
    cursor: 'pointer',
    borderBottom: `1px solid ${C.gold}`,
  },

  // Footer
  footer: {
    background: C.brand,
    color: 'rgba(250,250,247,0.7)',
    padding: '64px 0 32px',
  },
  footerTop: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    paddingBottom: 40,
    borderBottom: `1px solid rgba(201,169,97,0.2)`,
  },
  footerLogo: {
    fontFamily: C.serif,
    fontSize: 20,
    fontWeight: 700,
    color: C.bg,
    letterSpacing: '0.04em',
  },
  footerSub: {
    fontSize: 11,
    color: C.gold,
    letterSpacing: '0.2em',
    marginTop: 4,
    whiteSpace: 'nowrap',
    textAlign: 'center',
  },
  footerLinks: {
    display: 'flex',
    gap: 24,
    flexWrap: 'wrap',
    maxWidth: 480,
    justifyContent: 'flex-end',
  },
  footerLink: {
    fontSize: 12,
    color: 'rgba(250,250,247,0.7)',
    cursor: 'pointer',
    letterSpacing: '0.05em',
  },
  footerCompany: {
    paddingTop: 32,
    fontSize: 12,
    color: 'rgba(250,250,247,0.5)',
    lineHeight: 2,
  },
  footerNote: {
    marginTop: 24,
    fontSize: 11,
    color: 'rgba(250,250,247,0.4)',
    lineHeight: 2,
  },
  footerCopy: {
    marginTop: 24,
    fontSize: 11,
    color: 'rgba(250,250,247,0.4)',
    fontFamily: C.display,
    fontStyle: 'italic',
    letterSpacing: '0.1em',
  },
};

window.LPAClassic = LPAClassic;
