/* ============================================================
   Synca — 日程調整SaaS LP
   藍（インディゴ）× 朱（判子）× 生成り
   JavaScriptゼロ。モダンCSSのみで動作：
   @layer / oklch() / light-dark() / @property スクロール連動カウンター /
   scroll-driven animations / :has() 料金トグル / subgrid /
   container queries / details name= 排他アコーディオン /
   interpolate-size + ::details-content / Popover API + anchor positioning /
   linear() スプリングイージング / word-break: auto-phrase
   ============================================================ */

@layer reset, tokens, base, components, sections, motion;

/* ============ RESET ============ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { line-height: 1.7; }
  img, svg { display: inline-block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  h1, h2, h3, h4 { line-height: 1.35; overflow-wrap: break-word; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  a { color: inherit; }
  fieldset { border: 0; padding: 0; }
  blockquote { margin: 0; }
}

/* ============ TOKENS ============ */
@layer tokens {
  @property --n {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }

  :root {
    color-scheme: light dark;
    interpolate-size: allow-keywords;

    /* 色 — 藍・朱・墨・生成り */
    --ai:       oklch(34% 0.07 262);                /* 藍鉄 */
    --ai-deep:  oklch(27% 0.05 262);
    --ai-mid:   light-dark(oklch(48% 0.1 260), oklch(72% 0.09 258));
    --shu:      light-dark(oklch(56% 0.185 31), oklch(66% 0.17 33));  /* 朱肉 */
    --paper:    light-dark(oklch(97.8% 0.005 88), oklch(20% 0.015 262));
    --card:     light-dark(oklch(99.4% 0.002 88), oklch(24.5% 0.018 262));
    --ink:      light-dark(oklch(27% 0.02 262), oklch(92% 0.006 88));
    --ink-soft: color-mix(in oklch, var(--ink), transparent 34%);
    --line:     color-mix(in oklch, var(--ink), transparent 87%);
    --tint:     color-mix(in oklch, var(--ai-mid), var(--paper) 95%);
    --shu-tint: color-mix(in oklch, var(--shu), var(--paper) 93%);
    --ok:       light-dark(oklch(56% 0.13 155), oklch(72% 0.13 155));

    /* 書体 */
    --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --font-display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;

    /* 寸法 */
    --radius: 12px;
    --shadow: 0 1px 2px oklch(30% 0.03 262 / .06), 0 12px 32px -12px oklch(30% 0.05 262 / .18);
    --spring: linear(0, 0.32 26%, 0.85 48%, 1.08 64%, 0.98 80%, 1);
  }
}

/* ============ BASE ============ */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
  }

  body {
    font-family: var(--font-body);
    font-weight: 400;
    background: var(--paper);
    color: var(--ink);
    text-wrap: pretty;
  }

  ::selection { background: color-mix(in oklch, var(--shu), transparent 78%); }

  :focus-visible {
    outline: 2px solid var(--shu);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

  .icon {
    width: 1.1em;
    height: 1.1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.18em;
    flex: none;
  }

  .container {
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 36px);
  }
  .container--narrow { max-width: 780px; }

  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .sp-only { display: none; }
  @media (max-width: 640px) { .sp-only { display: inline; } }

  section { padding-block: clamp(68px, 9vw, 112px); }

  .section__label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.32em;
    color: var(--shu);
    margin-bottom: 14px;
  }
  .section__label::before {
    content: "";
    display: inline-block;
    width: 0.55em; height: 0.55em;
    border: 1.5px solid var(--shu);
    border-radius: 2px;
    rotate: 45deg;
    margin-right: 0.7em;
    vertical-align: 0.05em;
  }

  .section__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.55rem, 3.6vw, 2.3rem);
    letter-spacing: 0.02em;
    line-height: 1.45;
    margin-bottom: clamp(36px, 5vw, 56px);
    word-break: auto-phrase;
    text-spacing-trim: space-first;
    text-wrap: balance;
  }
}

/* ============ COMPONENTS ============ */
@layer components {

  /* --- ボタン --- */
  .btn {
    display: inline-grid;
    gap: 3px;
    padding: 13px 24px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    justify-items: center;
    transition: translate .2s ease, box-shadow .2s ease, background-color .2s ease;
  }
  .btn:hover { translate: 0 -2px; }
  .btn:active { translate: 0 0; }

  .btn__note {
    font-size: 0.72rem;
    font-weight: 400;
    opacity: 0.78;
    letter-spacing: 0.02em;
  }

  .btn--fill, .btn--trial, .btn--trial-cta {
    background: var(--shu);
    color: oklch(99% 0.003 88);
  }
  .btn--trial:hover, .btn--trial-cta:hover, .btn--fill:hover {
    box-shadow: 0 10px 24px -8px color-mix(in oklch, var(--shu), transparent 40%);
  }

  .btn--ghost, .btn--doc, .btn--doc-cta, .btn--plan {
    border: 1.5px solid color-mix(in oklch, var(--ai-mid), transparent 40%);
    color: light-dark(var(--ai), var(--ink));
    background: transparent;
  }
  .btn--ghost:hover, .btn--doc:hover, .btn--doc-cta:hover, .btn--plan:hover {
    background: var(--tint);
  }

  .btn--ghost, .btn--fill { padding: 8px 18px; font-size: 0.88rem; border-radius: 999px; }

  /* --- 読了バー --- */
  .progress { display: none; }
  @supports (animation-timeline: scroll()) {
    .progress {
      display: block;
      position: fixed;
      inset: 0 0 auto 0;
      height: 3px;
      z-index: 100;
      background: linear-gradient(90deg, var(--shu), var(--ai-mid));
      transform-origin: left;
      animation: progress-grow linear both;
      animation-timeline: scroll(root);
    }
  }
  @keyframes progress-grow {
    from { scale: 0 1; }
    to { scale: 1 1; }
  }

  /* --- デモバナー --- */
  .demo-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 18px;
    padding: 9px 16px;
    background: var(--ai-deep);
    color: oklch(93% 0.01 88);
    font-size: 0.78rem;
    text-align: center;
  }
  .demo-banner a { color: oklch(88% 0.06 60); }

  /* --- ナビバー --- */
  .navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in oklch, var(--paper), transparent 18%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .navbar__inner {
    max-width: 1120px;
    margin-inline: auto;
    padding: 12px clamp(20px, 4vw, 36px);
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .navbar__logo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    text-decoration: none;
  }
  .navbar__mark {
    display: inline-grid;
    place-items: center;
    width: 1.55em; height: 1.55em;
    background: var(--shu);
    color: oklch(99% 0.003 88);
    font-size: 0.78em;
    font-weight: 600;
    border-radius: 5px;
    rotate: -4deg;
  }
  .navbar__links {
    display: flex;
    gap: 26px;
    margin-left: auto;
    font-size: 0.9rem;
    font-weight: 500;
  }
  .navbar__links a {
    text-decoration: none;
    color: var(--ink-soft);
    transition: color .2s;
  }
  .navbar__links a:hover { color: var(--shu); }
  .navbar__cta { display: flex; gap: 10px; }
  .navbar__toggle {
    display: none;
    margin-left: auto;
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 9px;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
  }

  @media (max-width: 920px) {
    .navbar__links, .navbar__cta { display: none; }
    .navbar__toggle { display: inline-grid; }
  }

  /* --- モバイルメニュー（Popover） --- */
  .mobile-menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 86vw);
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: none;
    border-left: 1px solid var(--line);
    background: var(--paper);
    padding: 64px 28px 28px;
    transition: translate .35s ease, opacity .35s ease, display .35s allow-discrete, overlay .35s allow-discrete;
  }
  .mobile-menu:popover-open { translate: 0 0; opacity: 1; }
  @starting-style {
    .mobile-menu:popover-open { translate: 100% 0; opacity: 0.4; }
  }
  .mobile-menu::backdrop {
    background: oklch(20% 0.03 262 / .45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .mobile-menu__close {
    position: absolute;
    top: 16px; right: 20px;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 6px;
  }
  .mobile-menu__nav { display: grid; }
  .mobile-menu__nav a {
    padding: 15px 4px;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid var(--line);
  }
  .mobile-menu__cta {
    display: grid;
    gap: 12px;
    margin-top: 28px;
  }

  /* --- 判子スタンプ（シグネチャー） --- */
  .stamp {
    position: absolute;
    top: -16px; right: 12px;
    width: 62px; height: 62px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: 0.08em;
    color: var(--shu);
    border: 2.5px solid var(--shu);
    border-radius: 50%;
    rotate: -9deg;
    background: color-mix(in oklch, var(--shu), transparent 94%);
    animation: stamp-press .55s var(--spring) .9s both;
  }
  .stamp::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid color-mix(in oklch, var(--shu), transparent 55%);
    border-radius: 50%;
  }
}

/* ============ SECTIONS ============ */
@layer sections {

  /* --- Hero --- */
  .hero {
    padding-block: clamp(56px, 7vw, 96px);
    background:
      radial-gradient(56rem 30rem at 85% -10%, color-mix(in oklch, var(--ai-mid), transparent 91%), transparent),
      radial-gradient(40rem 26rem at -10% 100%, color-mix(in oklch, var(--shu), transparent 94%), transparent);
  }
  .hero__grid {
    display: grid;
    grid-template-columns: 1.04fr 0.96fr;
    align-items: center;
    gap: clamp(36px, 5vw, 64px);
  }
  @media (max-width: 920px) {
    .hero__grid { grid-template-columns: 1fr; }
  }

  .hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
  }
  .hero__badge {
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
    background: var(--card);
  }

  .hero__title { word-break: auto-phrase; text-spacing-trim: space-first; }

  .hero__strike {
    display: block;
    position: relative;
    width: fit-content;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.02rem, 2.3vw, 1.42rem);
    color: var(--ink-soft);
    text-decoration: none;
    margin-bottom: 14px;
  }
  .hero__strike::after {
    content: "";
    position: absolute;
    left: -1.5%; top: 50%;
    width: 103%; height: 0.14em;
    background: var(--shu);
    border-radius: 99px;
    rotate: -1.4deg;
    opacity: 0.85;
    transform-origin: left center;
    animation: strike-draw .5s ease-out .45s both;
  }

  .hero__main {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.3rem, 5.6vw, 3.7rem);
    line-height: 1.28;
    letter-spacing: 0.02em;
  }
  .hero__main em {
    font-style: normal;
    color: var(--shu);
  }

  .hero__sub {
    margin-top: 22px;
    max-width: 34em;
    font-size: clamp(0.94rem, 1.6vw, 1.02rem);
    color: var(--ink-soft);
  }

  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
  }

  .hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 30px;
    font-size: 0.78rem;
    color: var(--ink-soft);
  }
  .hero__trust .icon { color: var(--ai-mid); }

  /* Hero モックアップ */
  .mockup__window {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  .mockup__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in oklch, var(--ink), var(--card) 96%);
  }
  .mockup__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: color-mix(in oklch, var(--ink), transparent 78%);
  }
  .mockup__url {
    margin-left: 10px;
    font-size: 0.74rem;
    color: var(--ink-soft);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mockup__body { padding: 24px 22px 22px; }
  .mockup__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 16px;
  }
  .mockup__heading .icon { color: var(--shu); }

  .mockup__slots { display: grid; gap: 10px; }
  .mockup__slot {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 13px 16px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    font-size: 0.86rem;
  }
  .mockup__slot--selected {
    border-color: var(--shu);
    background: var(--shu-tint);
  }
  .mockup__slot-date { font-weight: 700; }
  .mockup__slot-time { color: var(--ink-soft); }
  .mockup__slot-tag {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ok);
    padding: 2px 10px;
    border: 1px solid color-mix(in oklch, var(--ok), transparent 55%);
    border-radius: 999px;
  }
  .mockup__slot-tag--partial {
    color: var(--ink-soft);
    border-color: var(--line);
  }
  .mockup__slot--selected .mockup__slot-tag { margin-right: 58px; }

  .mockup__done {
    margin-top: 16px;
    font-size: 0.78rem;
    color: var(--ink-soft);
  }
  .mockup__done::before {
    content: "✓ ";
    color: var(--ok);
    font-weight: 700;
  }

  .hero__mockup-caption {
    margin-top: 14px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--ink-soft);
    font-family: var(--font-display);
    letter-spacing: 0.05em;
  }

  /* --- 課題（メールスレッド） --- */
  .problem {
    background: var(--tint);
    text-align: center;
  }
  .problem .section__label { text-align: center; }

  .mailview {
    max-width: 640px;
    margin-inline: auto;
    text-align: left;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  .mailview__subject {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    font-size: 0.9rem;
    font-weight: 700;
    border-bottom: 1px solid var(--line);
  }
  .mailview__subject .icon { color: var(--ai-mid); }
  .mailview__subject em {
    font-style: normal;
    color: var(--shu);
  }
  .mailview__thread { padding: 8px 20px 4px; }
  .mail {
    padding: 13px 0 13px 16px;
    border-left: 3px solid var(--line);
    margin-block: 8px;
  }
  .mail--me { border-left-color: color-mix(in oklch, var(--ai-mid), transparent 30%); }
  .mail--them {
    border-left-color: color-mix(in oklch, var(--shu), transparent 45%);
    background: color-mix(in oklch, var(--ink), var(--card) 97.5%);
    border-radius: 0 8px 8px 0;
    padding-right: 12px;
  }
  .mail__meta {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-soft);
    margin-bottom: 3px;
  }
  .mail__meta span {
    font-weight: 400;
    margin-left: 10px;
    opacity: 0.75;
  }
  .mail__body { font-size: 0.87rem; }

  .mailview__outro {
    padding: 14px 22px 18px;
    text-align: right;
    font-family: var(--font-display);
    font-size: 0.88rem;
    color: var(--ink-soft);
  }

  .problem__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 760px;
    margin: 44px auto 0;
  }
  @media (max-width: 640px) {
    .problem__stats { grid-template-columns: 1fr; max-width: 340px; }
  }
  .problem__stat {
    display: grid;
    gap: 4px;
    padding: 22px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .problem__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.75rem;
    color: var(--ai-mid);
  }
  .problem__label { font-size: 0.78rem; color: var(--ink-soft); }

  .problem__resolve {
    margin-top: 40px;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    font-family: var(--font-display);
    font-weight: 600;
  }
  .problem__resolve strong { color: var(--shu); }

  /* --- 機能 --- */
  .features__list {
    container-type: inline-size;
    container-name: features;
    display: grid;
    gap: clamp(56px, 7vw, 88px);
  }
  .feature__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 5vw, 64px);
    align-items: center;
  }
  .feature__item--reverse .feature__text { order: 2; }
  .feature__item--reverse .feature__mockup { order: 1; }

  @container features (max-width: 720px) {
    .feature__item { grid-template-columns: 1fr; }
    .feature__item--reverse .feature__text { order: 1; }
    .feature__item--reverse .feature__mockup { order: 2; }
  }

  .feature__kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--ai-mid);
    margin-bottom: 12px;
  }
  .feature__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    margin-bottom: 14px;
    word-break: auto-phrase;
  }
  .feature__body {
    font-size: 0.94rem;
    color: var(--ink-soft);
    margin-bottom: 20px;
  }
  .feature__points { display: grid; gap: 9px; font-size: 0.88rem; }
  .feature__points .icon { color: var(--shu); margin-right: 8px; }

  /* 機能モックアップ */
  .fmock {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 22px;
  }
  .fmock__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink-soft);
    margin-bottom: 16px;
  }
  .fmock__title .icon { color: var(--ai-mid); }

  .fmock__cal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .fmock__cal-slot {
    padding: 13px 6px;
    text-align: center;
    font-size: 0.76rem;
    border-radius: 8px;
  }
  .fmock__cal-slot--busy {
    background: color-mix(in oklch, var(--ink), var(--card) 93%);
    color: var(--ink-soft);
  }
  .fmock__cal-slot--free {
    border: 1.5px dashed color-mix(in oklch, var(--ai-mid), transparent 35%);
    color: var(--ai-mid);
    font-weight: 700;
  }
  .fmock__result, .fmock__confirmed {
    margin-top: 16px;
    font-size: 0.8rem;
    font-weight: 700;
  }
  .fmock__result::before, .fmock__confirmed::before {
    content: "✓ ";
    color: var(--ok);
  }

  .fmock__link-url {
    font-size: 0.82rem;
    padding: 8px 14px;
    background: var(--tint);
    border-radius: 8px;
    color: var(--ai-mid);
    font-weight: 500;
    width: fit-content;
    margin-bottom: 14px;
    letter-spacing: 0.03em;
  }
  .fmock__choices { display: grid; gap: 8px; }
  .fmock__choice {
    padding: 11px 16px;
    border: 1.5px solid var(--line);
    border-radius: 9px;
    font-size: 0.85rem;
  }
  .fmock__choice--picked {
    border-color: var(--shu);
    background: var(--shu-tint);
    font-weight: 700;
  }

  .fmock__notify {
    display: flex;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in oklch, var(--ink), var(--card) 97.5%);
  }
  .fmock__notify .icon { color: var(--ai-mid); font-size: 1.2rem; margin-top: 2px; }
  .fmock__notify-title { font-size: 0.84rem; font-weight: 700; }
  .fmock__notify-body { font-size: 0.8rem; color: var(--ink-soft); margin-top: 3px; }
  .fmock__reschedule {
    margin-top: 14px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ai-mid);
  }

  .fmock__logos {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }
  .fmock__logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
  }
  .fmock__logo::before {
    content: "";
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--dot, var(--ai-mid));
  }

  /* --- 導入効果（ダーク・カウンター） --- */
  .results {
    background:
      radial-gradient(50rem 26rem at 90% 0%, oklch(40% 0.09 262 / .35), transparent),
      var(--ai-deep);
    color: oklch(96% 0.005 88);
    text-align: center;
  }
  .results .section__title { color: inherit; }
  .section__label--light { color: oklch(78% 0.1 40); }
  .section__label--light::before { border-color: oklch(78% 0.1 40); }

  .results__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  @media (max-width: 920px) { .results__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .results__grid { grid-template-columns: 1fr; } }

  .result__card {
    padding: 30px 18px 26px;
    background: oklch(100% 0 0 / .055);
    border: 1px solid oklch(100% 0 0 / .13);
    border-radius: var(--radius);
    display: grid;
    gap: 6px;
  }
  .result__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 3.6vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
  }
  .result__num small {
    font-size: 0.45em;
    font-weight: 600;
    margin-inline: 2px;
  }
  .result__label { font-size: 0.8rem; opacity: 0.72; }

  /* @property + counter によるカウントアップ */
  .count { counter-reset: n var(--n); }
  .count::after { content: counter(n); }
  @supports (animation-timeline: view()) {
    .count {
      animation: count-up 1s ease-out both;
      animation-timeline: view();
      animation-range: entry 20% entry 80%;
    }
  }
  @keyframes count-up { from { --n: 0; } }

  .results__source {
    margin-top: 30px;
    font-size: 0.74rem;
    opacity: 0.55;
  }

  /* --- 導入事例 --- */
  .cases__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  @media (max-width: 920px) { .cases__grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; } }

  .case__card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 16px;
    padding: 26px 24px 22px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
  }
  .case__industry {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ai-mid);
  }
  .case__quote {
    position: relative;
    font-size: 0.9rem;
    line-height: 1.95;
    padding-top: 10px;
  }
  .case__quote::before {
    content: "「";
    position: absolute;
    top: -14px; left: -14px;
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 800;
    color: color-mix(in oklch, var(--shu), transparent 65%);
  }

  .case__person {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }
  .case__avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--line);
  }
  .case__seal {
    width: 52px; height: 52px;
    display: grid;
    place-items: center;
    writing-mode: vertical-rl;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    color: var(--shu);
    border: 2px solid var(--shu);
    border-radius: 7px;
    rotate: -3deg;
    background: color-mix(in oklch, var(--shu), transparent 95%);
    flex: none;
  }
  .case__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.98rem;
  }
  .case__name span { font-size: 0.75em; font-weight: 600; margin-left: 2px; }
  .case__role { font-size: 0.72rem; color: var(--ink-soft); margin-top: 2px; }
  .case__metric {
    margin-left: auto;
    text-align: right;
    font-size: 0.66rem;
    color: var(--ink-soft);
  }
  .case__metric em {
    display: block;
    font-style: normal;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.18rem;
    color: var(--shu);
  }
  @media (max-width: 380px) { .case__metric { display: none; } }

  /* --- セキュリティ --- */
  .security { background: var(--tint); }
  .security__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  @media (max-width: 920px) { .security__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .security__grid { grid-template-columns: 1fr; } }

  .security__badge {
    padding: 26px 22px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .security__icon {
    width: 34px; height: 34px;
    color: var(--ai-mid);
    stroke-width: 1.5;
    margin-bottom: 14px;
  }
  .security__badge-title {
    font-size: 1.02rem;
    font-weight: 700;
    margin-bottom: 8px;
  }
  .security__badge-body {
    font-size: 0.85rem;
    color: var(--ink-soft);
  }
  .security__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 640px;
    margin: 36px auto 0;
    font-size: 0.82rem;
    color: var(--ink-soft);
  }
  .security__note .icon { margin-top: 4px; color: var(--ai-mid); }

  /* --- 料金 --- */
  .pricing .section__title { text-align: center; }
  .pricing .section__label { text-align: center; }

  .billing {
    display: flex;
    width: fit-content;
    margin: 0 auto 40px;
    padding: 4px;
    gap: 4px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
  }
  .billing__opt { position: relative; }
  .billing__opt input {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
  }
  .billing__opt span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 22px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink-soft);
    transition: background-color .25s ease, color .25s ease;
  }
  .billing__opt:has(input:checked) span {
    background: var(--ai);
    color: oklch(97% 0.005 88);
  }
  .billing__opt em {
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--shu);
    background: color-mix(in oklch, var(--shu), transparent 88%);
    padding: 2px 8px;
    border-radius: 999px;
  }
  .billing__opt:has(input:checked) em {
    color: oklch(97% 0.005 88);
    background: var(--shu);
  }
  .billing__opt:has(input:focus-visible) span {
    outline: 2px solid var(--shu);
    outline-offset: 2px;
  }

  /* subgrid で3枚のカードの行位置を揃える */
  .pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
  }
  .pricing__card {
    position: relative;
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    gap: 10px;
    padding: 30px 26px 26px;
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 14px;
  }
  @media (max-width: 920px) {
    .pricing__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
    .pricing__card { grid-template-rows: auto; }
  }

  .pricing__card--popular {
    border-color: var(--ai-mid);
    box-shadow: var(--shadow);
  }
  .pricing__popular-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    translate: -50% 0;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: oklch(99% 0.003 88);
    background: var(--shu);
    padding: 4px 16px;
    border-radius: 999px;
  }
  .pricing__plan {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
  }
  .pricing__desc { font-size: 0.78rem; color: var(--ink-soft); }
  .pricing__price {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: 0.01em;
    margin-block: 6px;
  }
  .pricing__unit {
    font-size: 0.42em;
    font-weight: 600;
    color: var(--ink-soft);
    font-family: var(--font-body);
  }
  .pricing__users {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ai-mid);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .pricing__features {
    display: grid;
    gap: 9px;
    align-content: start;
    font-size: 0.86rem;
  }
  .pricing__features .icon { color: var(--shu); margin-right: 7px; }
  .btn--plan, .btn--plan-fill { margin-top: 8px; }
  .btn--plan-fill {
    background: var(--ai);
    border-color: var(--ai);
    color: oklch(97% 0.005 88);
  }
  .btn--plan-fill:hover { background: color-mix(in oklch, var(--ai), black 12%); }

  /* :has() による価格切替（JSゼロ） */
  .price--year { display: none; }
  .pricing:has(#bill-year:checked) .price--month { display: none; }
  .pricing:has(#bill-year:checked) .price--year { display: inline; }

  .pricing__note {
    margin-top: 34px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--ink-soft);
  }

  /* ツールチップ（Popover + anchor positioning） */
  .tipbtn {
    anchor-name: --tip-billing;
    display: inline-grid;
    place-items: center;
    width: 19px; height: 19px;
    border-radius: 50%;
    border: 1.5px solid var(--ai-mid);
    color: var(--ai-mid);
    background: none;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    vertical-align: 0.1em;
    margin-inline: 3px;
  }
  .tip {
    position: fixed;
    position-anchor: --tip-billing;
    position-area: block-start;
    position-try-fallbacks: flip-block;
    margin: 0 0 10px;
    max-width: 300px;
    padding: 14px 16px;
    font-size: 0.8rem;
    line-height: 1.75;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: opacity .25s ease, translate .25s ease, display .25s allow-discrete, overlay .25s allow-discrete;
  }
  .tip:popover-open { opacity: 1; translate: 0 0; }
  @starting-style {
    .tip:popover-open { opacity: 0; translate: 0 6px; }
  }

  /* --- FAQ --- */
  .faq__list { border-top: 1px solid var(--line); }
  .faq__item { border-bottom: 1px solid var(--line); }
  .faq__q {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 20px 40px 20px 4px;
    position: relative;
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    list-style: none;
  }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__q::before {
    content: "問";
    flex: none;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--shu);
    border: 1.5px solid color-mix(in oklch, var(--shu), transparent 45%);
    border-radius: 6px;
    width: 1.9em; height: 1.9em;
    display: inline-grid;
    place-items: center;
    translate: 0 0.2em;
  }
  .faq__q::after {
    content: "＋";
    position: absolute;
    right: 8px;
    top: 50%;
    translate: 0 -50%;
    font-weight: 400;
    font-size: 1.15rem;
    color: var(--ai-mid);
    transition: rotate .3s ease;
  }
  .faq__item[open] .faq__q::after { rotate: 45deg; }

  /* ::details-content + interpolate-size による高さアニメーション */
  .faq__item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size .38s ease, content-visibility .38s allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }

  .faq__a {
    padding: 2px 8px 22px 46px;
    font-size: 0.9rem;
    color: var(--ink-soft);
  }

  /* --- 最終CTA --- */
  .final-cta {
    background:
      radial-gradient(46rem 24rem at 12% 0%, color-mix(in oklch, var(--shu), transparent 82%), transparent),
      var(--ai-deep);
    color: oklch(96% 0.005 88);
    text-align: center;
  }
  .final-cta__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 3.6vw, 2.3rem);
    word-break: auto-phrase;
  }
  .final-cta__lead {
    margin-top: 12px;
    font-size: 0.95rem;
    opacity: 0.75;
  }

  .final-cta__blocks {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 22px;
    max-width: 880px;
    margin: 44px auto 0;
  }
  @media (max-width: 820px) {
    .final-cta__blocks { grid-template-columns: 1fr; max-width: 440px; }
  }

  .final-cta__block {
    display: grid;
    align-content: start;
    gap: 14px;
    text-align: left;
    padding: 30px 28px;
    border-radius: 14px;
    background: light-dark(oklch(99% 0.003 88), oklch(26% 0.02 262));
    color: var(--ink);
  }
  .final-cta__block--trial { border: 2px solid var(--shu); }
  .final-cta__block-tag {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--shu);
  }
  .final-cta__block-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.3rem;
  }
  .final-cta__block-list {
    display: grid;
    gap: 8px;
    font-size: 0.86rem;
    color: var(--ink-soft);
  }
  .final-cta__block-list .icon { color: var(--shu); margin-right: 7px; }
  .final-cta__block .btn { margin-top: 6px; }

  .final-cta__divider {
    align-self: center;
    font-family: var(--font-display);
    font-size: 0.85rem;
    opacity: 0.6;
  }

  .final-cta__note {
    margin-top: 34px;
    font-size: 0.78rem;
    opacity: 0.65;
    letter-spacing: 0.04em;
  }

  /* --- フッター --- */
  .footer {
    border-top: 1px solid var(--line);
    padding: 40px 0 28px;
  }
  .footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }
  .footer__logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
  }
  .footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.82rem;
  }
  .footer__nav a {
    text-decoration: none;
    color: var(--ink-soft);
  }
  .footer__nav a:hover { color: var(--shu); }
  .footer__copy {
    margin-top: 28px;
    text-align: center;
    font-size: 0.72rem;
    color: var(--ink-soft);
  }
}

/* ============ MOTION ============ */
@layer motion {

  @keyframes stamp-press {
    from {
      opacity: 0;
      scale: 2.1;
      rotate: -2deg;
    }
    55% { opacity: 1; }
    to {
      opacity: 1;
      scale: 1;
      rotate: -9deg;
    }
  }

  @keyframes strike-draw {
    from { scale: 0 1; }
    to { scale: 1 1; }
  }

  /* スクロール出現（対応ブラウザのみ・非対応はそのまま表示） */
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise .8s ease both;
      animation-timeline: view();
      animation-range: entry 5% entry 42%;
    }
    .mailview .mail {
      animation: rise .7s ease both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }

  @keyframes rise {
    from {
      opacity: 0;
      translate: 0 26px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-delay: 0s !important;
      transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
  }
}