.home { max-width: none; padding: 0; }
.nw { white-space: nowrap; }

.va-band { padding: 80px 0 64px; background: var(--color-accent); color: #FFFFFF; }
.va-band :focus-visible { outline-color: #FFFFFF; }
.va-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 48px; align-items: start; }
.va-text { padding-top: 24px; }
.va-band h1 { font-size: 52px; line-height: 1.06; letter-spacing: -.02em; font-weight: 800; font-stretch: 108%; color: #FFFFFF; }
.va-band .lead { margin-top: 24px; font-size: 20px; line-height: 1.5; color: #FFFFFF; }
.va-band .cta { margin-top: 36px; }
.hfacts { margin-top: 20px; display: grid; gap: 8px; }
.hfacts li { display: flex; align-items: center; gap: 10px; font-size: 17px; line-height: 1.55; color: #FFFFFF; }
.hfacts .icon { width: 17px; height: 17px; color: #FFFFFF; }
.va-after { height: 110px; }

.shot { margin: 0; }
.shot .frame { height: auto; overflow: hidden; border-radius: var(--radius-container); background: var(--color-surface); }
.shot figcaption { margin-top: 10px; font-size: 13px; color: var(--color-ink-2); text-align: right; }
.va-shot { position: relative; top: 150px; z-index: 2; }
.va-shot .frame { box-shadow: var(--shadow-hero); }

.home-h2 { font-size: 36px; line-height: 1.15; letter-spacing: -.015em; font-weight: 800; font-stretch: 108%; margin: 0; }

.pricing { padding-top: 96px; }
.pr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.per { display: inline-flex; min-width: 0; margin: 0; padding: 4px; gap: 4px; border: 1px solid var(--color-line); border-radius: 10px; background: var(--color-surface); }
.per label { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border-radius: 7px; font-size: 15px; font-weight: 600; color: var(--color-ink-2); white-space: nowrap; cursor: pointer; }
.per label:hover { background: var(--color-chrome-2); color: var(--color-ink); }
.per input:checked + label, .per input:checked + label:hover { background: var(--color-ink); color: #FFFFFF; }
.per input:focus-visible + label { outline: 3px solid var(--color-ink); outline-offset: 2px; }

.pr-body { display: none; }
.pricing:has(#per-month:checked) [data-period="month"],
.pricing:has(#per-year:checked) [data-period="year"],
.pricing:has(#per-two_years:checked) [data-period="two_years"] { display: block; }

.pt { display: grid; grid-template-columns: 170px repeat(3, minmax(0, 1fr)); column-gap: 16px; margin-top: 36px; padding: 20px 24px; border: 1px solid var(--color-line); border-radius: var(--radius-container); background: var(--color-surface); }
.pt-col { display: grid; grid-template-rows: 56px 68px 68px 52px 76px; padding: 0 16px; }
.pt-4 .pt-col { grid-template-rows: 56px 68px 52px 76px; }
.pt-col > div { display: flex; align-items: center; border-bottom: 1px solid var(--color-row); font-size: 17px; white-space: nowrap; }
.pt-col > div:last-child { border-bottom: 0; }
.pt-lab { padding: 0; }
.pt-lab > div { color: var(--color-ink-2); font-weight: 400; }
.pt-h { font-size: 17px; font-weight: 700; color: var(--color-ink); }
.net { font-size: 36px; line-height: 1.1; font-weight: 800; font-stretch: 106%; letter-spacing: -.02em; }
.unit { margin-left: 6px; font-size: 15px; font-weight: 400; color: var(--color-ink-2); }
.pt-col.rec { position: relative; margin: -22px 0; padding: 20px 14px; border: 2px solid var(--color-accent); border-radius: var(--radius-container); background: var(--color-surface); box-shadow: var(--shadow-plan); }
.badge { position: absolute; top: -13px; left: 14px; height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--radius-inline); background: var(--color-accent); color: var(--color-on-accent); font-size: 13px; font-weight: 700; white-space: nowrap; }

.plans-m { display: none; }

.terms { margin-top: 22px; display: grid; gap: 8px; }
.terms li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 17px; line-height: 1.55; }
.terms .icon { width: 18px; height: 18px; margin-top: 4px; color: var(--color-ink); }

.home-end { padding-bottom: 96px; }

@media (max-width: 1100px) {
  .va-grid { grid-template-columns: 1fr; gap: 40px; }
  .va-shot { max-width: 460px; top: 0; margin-bottom: -150px; }
  .va-after { height: 150px; }
  .pt { grid-template-columns: 130px repeat(3, minmax(0, 1fr)); column-gap: 8px; padding: 20px 16px; }
  .pt-col { padding: 0 10px; }
  .net { font-size: 28px; }
  .pt-col > div { white-space: normal; }
}

@media (max-width: 760px) {
  .pt { display: none; }
  .plans-m { display: grid; gap: 18px; margin-top: 28px; }
  .plan-m { position: relative; padding: 18px 20px 20px; border: 1px solid var(--color-line); border-radius: var(--radius-container); background: var(--color-surface); }
  .plan-m.rec { padding: 22px 19px 19px; border: 2px solid var(--color-accent); }
  .plan-m .badge { left: 18px; }
  .plan-m h3 { font-size: 20px; line-height: 1.3; font-weight: 700; }
  .net-m { margin-top: 2px; }
  .plan-m .gr { font-size: 15px; color: var(--color-ink-2); }
  .plan-m .ai { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 15px; }
  .plan-m .btn, .plan-m .btn-secondary { width: 100%; margin-top: 14px; }
}

@media (max-width: 640px) {
  .va-band { padding: 36px 0 32px; }
  .va-text { padding-top: 0; }
  .va-band h1 { font-size: 38px; line-height: 1.08; }
  .va-band .lead { margin-top: 14px; font-size: 17px; }
  .va-band .cta { margin-top: 24px; }
  .va-band .btn-l { width: 100%; }
  .hfacts li { align-items: flex-start; font-size: 16px; }
  .hfacts .icon { margin-top: 3px; }
  .home-h2 { font-size: 28px; font-stretch: 100%; }
  .pr-head .home-h2 { white-space: nowrap; }
  .pricing { padding-top: 64px; }
  .pr-head { gap: 14px; }
  .per { width: 100%; }
  .per label { flex: 1 1 0; padding: 0 6px; }
  .plan-m h3 { font-size: 17px; }
  .net { font-size: 28px; }
  .plan-m .badge { left: 18px; }
  .terms li { grid-template-columns: 16px 1fr; gap: 8px; font-size: 16px; }
  .terms .icon { width: 16px; height: 16px; }
}

@media (max-width: 389px) {
  .pr-head .home-h2 { white-space: normal; }
}