/* 981px-1199px refinements layered after notebook.css. */
@media screen and (min-width: 981px) and (max-width: 1199px) {
  body.lp-page,
  .lp-page .lp-main {
    min-width: 0;
    overflow-x: hidden;
  }

  .lp-page .container,
  .lp-page .header__inner {
    width: min(1000px, calc(100% - 48px));
    max-width: none;
    margin-inline: auto;
  }

  .lp-page img,
  .lp-page .mock-photo,
  .lp-page .wide-photo {
    max-width: 100%;
    height: auto;
  }

  body.lp-page.reveal-ready .js-reveal[data-reveal="left"],
  body.lp-page.reveal-ready .js-reveal[data-reveal="right"] {
    --reveal-x: 0;
    --reveal-y: 28px;
  }

  .lp-page .header .logo {
    width: clamp(180px, 18vw, 210px);
    height: clamp(32px, 3.2vw, 38px);
  }

  .lp-page .nav {
    gap: 36px;
    font-size: clamp(15px, 1.5vw, 17px);
  }

  .lp-page .header .nav .btn,
  .lp-page .nav .btn {
    width: clamp(170px, 17vw, 190px);
    min-width: 0;
    padding-inline: 20px;
  }

  .lp-page .hero {
    min-height: clamp(620px, 62vw, 720px);
  }

  .lp-page .hero__copy {
    width: clamp(360px, 40vw, 430px);
    margin-left: max(24px, calc((100vw - min(1000px, calc(100vw - 48px))) / 2));
    padding-top: clamp(150px, 15vw, 178px);
  }

  .lp-page .hero h1 {
    font-size: clamp(31px, 3.3vw, 36px);
  }

  .lp-page .hero p {
    width: 100%;
    font-size: clamp(15px, 1.5vw, 16px);
  }

  .lp-page .hero__actions .btn {
    width: min(240px, calc(100% - 40px));
    min-width: 0;
    height: 54px;
    font-size: 17px;
  }

  .lp-page .hero__visual {
    right: max(20px, calc((100vw - min(1120px, calc(100vw - 48px))) / 2));
    top: clamp(42px, 6vw, 72px);
    width: clamp(520px, 56vw, 690px);
    height: auto;
    aspect-ratio: 690 / 695;
    transform: none;
    transform-origin: top right;
  }

  .lp-page .device-art {
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: 91.3% 136.1%;
    background-position: -48% 92%;
  }

  .lp-page .hero__circle--a {
    left: 81.3%;
    top: 4.7%;
    width: 18%;
    height: 17.84%;
  }

  .lp-page .hero__circle--a::before {
    width: clamp(44px, 5vw, 72px);
    height: clamp(44px, 5vw, 72px);
    transform: translateY(10%);
  }

  .lp-page .hero__circle--b {
    left: 14.6%;
    top: 24.9%;
    width: 12.17%;
    height: 12.09%;
  }

  .lp-page .hero__circle--b::before {
    width: clamp(36px, 4.2vw, 54px);
    height: clamp(36px, 4.2vw, 54px);
    transform: translateY(10%);
  }

  .lp-page .hero__circle--c {
    left: 79.6%;
    top: 72.5%;
    width: 16.52%;
    height: 16.4%;
  }

  .lp-page .hero__circle--c::before {
    width: clamp(42px, 5vw, 67px);
    height: clamp(42px, 5vw, 67px);
    transform: translateY(10%);
  }

  .lp-page .hero__circle--e {
    left: 59.1%;
    top: 0;
    width: 11.01%;
    height: 10.94%;
  }

  .lp-page .feature {
    min-height: auto;
  }

  .lp-page .feature-list {
    gap: clamp(56px, 6vw, 72px);
  }

  .lp-page .feature-item,
  .lp-page .feature-item--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 48%);
    gap: clamp(28px, 4vw, 44px);
    min-height: 360px;
  }

  .lp-page .feature-item--reverse {
    grid-template-columns: minmax(360px, 48%) minmax(0, 1fr);
  }

  .lp-page .feature .feature-copy {
    min-width: 0;
  }

  .lp-page .wide-photo {
    width: 100%;
    max-width: 520px;
  }

  .lp-page .feature-item::before {
    left: calc((100vw - min(1000px, calc(100vw - 48px))) / -2);
    width: calc((100vw - min(1000px, calc(100vw - 48px))) / 2 + 94%);
  }

  .lp-page .feature-item--reverse::before {
    right: calc((100vw - min(1000px, calc(100vw - 48px))) / -2);
  }

  .lp-page .feature-copy h3 {
    font-size: clamp(25px, 2.5vw, 29px);
  }

  .lp-page .feature-copy ul {
    font-size: clamp(15px, 1.5vw, 16px);
  }

  .lp-page .problem__cards,
  .lp-page .solution__cards,
  .lp-page .voice__cards,
  .lp-page .plans {
    gap: clamp(22px, 2.8vw, 32px);
  }

  .lp-page .small-card,
  .lp-page .solution-card,
  .lp-page .voice__cards article,
  .lp-page .plan {
    min-width: 0;
  }

  .lp-page .voice__cards .mock-photo--7 {
    background-position: center 32%;
  }

  .lp-page .plan .btn {
    width: min(240px, calc(100% - 40px));
    min-width: 0;
  }

  .lp-page .cta__panel {
    width: min(1000px, calc(100% - 48px));
    padding-inline: clamp(90px, 11vw, 120px);
  }

  .lp-page .cta__panel div {
    flex-wrap: nowrap;
  }

  .lp-page .cta .btn {
    width: 278px;
    min-width: 278px;
    height: 58px;
    font-size: 19px;
  }

  .lp-page .flow {
    min-height: 0;
    padding: 56px 0 72px;
    overflow: hidden;
  }

  .lp-page .flow .container {
    width: min(760px, calc(100% - 80px));
    max-width: none;
    margin-inline: auto;
  }

  .lp-page .flow .section-heading {
    width: 100%;
    height: 118px;
  }

  .lp-page .flow-illust--left {
    left: 0;
    top: 8px;
    width: clamp(54px, 6vw, 70px);
    height: clamp(130px, 15vw, 168px);
  }

  .lp-page .flow-illust--right {
    right: 0;
    top: 8px;
    width: clamp(56px, 6vw, 72px);
    height: clamp(136px, 15vw, 176px);
  }

  .lp-page .flow-list {
    --flow-gap: clamp(28px, 4vw, 40px);
    --flow-circle: clamp(52px, 6vw, 64px);
    --flow-line: 2px;
    width: min(680px, 100%);
    margin: 48px auto 0;
    gap: var(--flow-gap);
  }

  .lp-page .flow-list li {
    grid-template-columns: var(--flow-circle) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 34px);
  }

  .lp-page .flow-list span {
    width: var(--flow-circle);
    height: var(--flow-circle);
    font-size: clamp(22px, 2.8vw, 28px);
  }

  .lp-page .flow-list h3 {
    margin-bottom: 10px;
    font-size: clamp(22px, 2.6vw, 28px);
    line-height: 1.45;
  }

  .lp-page .flow-list p {
    max-width: 34em;
    font-size: clamp(16px, 1.8vw, 18px);
    line-height: 1.9;
    letter-spacing: .02em;
  }
}

@media screen and (min-width: 1100px) and (max-width: 1199px) {
  .lp-page .hero__visual {
    width: clamp(640px, 56vw, 690px);
  }
}