/* Kizunatap /pricing (C16 plans + C17 comparison + trust). Loads after site.css. The billing hooks (.pr-amount, .pr-per,
   [data-year-note-jpy], [data-cycle], [data-pr-cta]) keep their markup; only wrappers and these rules changed (B12). */
/* ---------- /pricing ---------- */
.pr-top { padding: clamp(28px, 5vw, 72px) 0 calc(var(--mk-sec-b) + var(--mk-sheet-r)); background: var(--kz-milk); text-align: center; }
.pr-top h1 { max-width: 18em; margin: 0 auto; font-size: clamp(30px, 4vw, 56px); }
.pr-top .lead { max-width: 36em; margin: 16px auto 0; font-size: clamp(16px, 1.4vw, 19px); color: var(--kz-mauve); }
.site .pr-seg { display: inline-flex; gap: 0; width: auto; margin: 32px auto 0; padding: 4px; background: var(--kz-paper); border: 1px solid var(--mk-line); border-radius: 999px; }
.site .pr-seg button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px;
  background: transparent; color: var(--kz-plum); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: none; transition: background-color .25s ease, color .25s ease;
  flex: none; width: auto; outline: 0;
}
.site .pr-seg button[aria-pressed="true"] { background: var(--kz-plum); color: #fff; box-shadow: none; outline: 0; }
.site .pr-seg button:focus-visible { outline: 2px solid var(--kz-rose); outline-offset: 2px; }
.site .pr-badge { display: inline-block; padding: 0 8px; border-radius: 8px; background: var(--kz-amber); color: var(--kz-plum); font-size: 12px; font-weight: 700; line-height: 22px; }
.site .pr-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); align-items: stretch; margin-top: clamp(28px, 3vw, 44px); text-align: left; }
.site .pr-card { position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; background: var(--kz-paper); border: 1px solid var(--mk-line); border-radius: 24px; box-shadow: none; overflow: visible; }
.site .pr-pro { border: 2px solid var(--kz-rose); }
.pr-head { padding: 26px 26px 22px; border-radius: 23px 23px 0 0; background: var(--kz-milk); }
.pr-pro .pr-head { background: var(--kz-blush); border-radius: 22px 22px 0 0; }
.pr-ent .pr-head { background: var(--kz-paper); border-bottom: 1px solid var(--mk-line); }
/* B15: name + yearly discount chip (hidden on monthly), the post-trial charge line under the Pro CTA (billing open only) */
.pr-nm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.site .pr-off { display: inline-block; padding: 0 8px; border: 1px solid var(--kz-rose); border-radius: 8px; background: var(--kz-paper); color: var(--kz-rose); font-size: 12px; font-weight: 700; line-height: 22px; white-space: nowrap; }
.site .pr-off[hidden] { display: none; }
.site .pr-charge { margin: -12px 26px 24px; font-size: 13px; line-height: 1.6; color: var(--kz-mauve); }
.site .pr-charge b { color: var(--kz-plum); }
.site .band .pr-charge { max-width: 30em; margin: 10px 0 0; color: var(--kz-plum); }
.site .pr-rec { position: absolute; top: -14px; right: 22px; left: auto; z-index: 1; padding: 3px 14px; border-radius: 999px; background: var(--kz-rose); color: #fff; font-size: 13px; font-weight: 700; line-height: 22px; }
.site .pr-name { font-family: var(--font-round); font-size: 22px; line-height: 1.3; font-weight: 700; }
.site .pr-price { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.site .pr-amount, .site .pr-ask { font-size: clamp(34px, 3.2vw, 44px); line-height: 1.15; font-weight: 700; letter-spacing: 0; }
.site .pr-ask { font-size: 26px; }
.site .pr-per { font-size: 15px; color: var(--kz-mauve); }
.site .pr-sub { min-height: 48px; margin-top: 4px; font-size: 14px; line-height: 24px; color: var(--kz-mauve); }
.site .pr-list { display: grid; gap: 10px; margin: 0; padding: 22px 26px 8px; list-style: none; }
.site .pr-list li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.65; margin: 0; }
.site .pr-list li::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%; background: var(--kz-blush) no-repeat center / 10px 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2 4-4.4' fill='none' stroke='%23BE1F60' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.site .pr-card > .btn { align-self: stretch; flex-direction: column; gap: 0; margin: auto 26px 26px; width: auto; }
.site .pr-card > .btn small { font-size: 12px; font-weight: 600; opacity: .9; }
.site .pr-trial { margin-top: 32px; text-align: center; font-size: 16px; font-weight: 700; color: var(--kz-plum); }
.pr-trial::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--kz-amber); vertical-align: 1px; }
.site .pr-tax { display: block; margin: 8px auto 0; max-width: 40em; text-align: center; font-size: 13px; line-height: 1.7; color: var(--kz-mauve); }

/* comparison (C17 adapted; on narrow screens rows stack: feature line, then the 3 plan values; no sideways scroll) */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--kz-paper); border: 1px solid var(--mk-line); border-radius: 24px; overflow: hidden; font-size: 15px; }
.cmp th, .cmp td { padding: 14px 18px; border-bottom: 1px solid var(--mk-line); text-align: center; vertical-align: middle; line-height: 1.5; }
.cmp tr:last-child > * { border-bottom: 0; }
.cmp thead th { background: var(--kz-paper); font-family: var(--font-round); font-size: 18px; }
.cmp thead th.pro { background: var(--kz-blush); }
.cmp th[scope="row"] { text-align: left; font-weight: 600; width: 32%; }
.cmp td.pro { background: #FFF5F9; }
.cmp .grp th { padding-top: 22px; background: var(--kz-milk); text-align: left; font-family: var(--font-round); font-size: 16px; color: var(--kz-rose); }
.ck, .nx { display: inline-block; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; }
.ck { background: var(--kz-blush) no-repeat center / 12px 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2 4-4.4' fill='none' stroke='%23BE1F60' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.nx { width: 14px; height: 2px; border-radius: 2px; background: var(--mk-line); }
.trust { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 28px; align-items: center; max-width: 880px; margin: 0 auto; padding: clamp(24px, 3vw, 40px); background: var(--kz-blush); border-radius: 24px; }
.trust img { width: 64px; height: 64px; }
/* B22: gpt-image on the Pro / Team plan cards (between the list and the CTA) and in the trust block */
.pr-img { display: block; margin: 10px 26px 22px; }
.pr-img img { display: block; width: 100%; height: auto; border-radius: 18px; }
.trust .trust-img { display: block; width: 160px; }
.trust .trust-img img { display: block; width: 100%; height: auto; border-radius: 24px; }
.trust h2 { font-size: clamp(22px, 2.4vw, 30px); }
.trust p { margin-top: 8px; color: var(--kz-plum); }
.trust .links-row { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; }
.trust .links-row a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 700; color: var(--kz-rose); }

@media (max-width: 1120px) {
  .site .pr-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-left: auto; margin-right: auto; gap: 28px 18px; }
}
@media (max-width: 640px) {
  .site .pr-plans { grid-template-columns: 1fr; max-width: 520px; }
}
@media (max-width: 640px) {
  .trust { grid-template-columns: 1fr; text-align: left; }
  .trust .trust-img { width: 120px; }
  .cmp, .cmp thead, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp { border-radius: 20px; }
  .cmp tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--mk-line); }
  .cmp th, .cmp td { border-bottom: 0; padding: 10px 4px; font-size: 13px; overflow-wrap: anywhere; }
  .cmp thead th:first-child { display: none; }
  .cmp thead th { font-size: 15px; }
  .cmp th[scope="row"] { grid-column: 1 / -1; width: auto; padding: 14px 14px 2px; }
  .cmp .grp { display: block; }
  .cmp .grp th { padding: 16px 14px 8px; }
}