/* Anti Softworks home: the island. The beach behind the page comes from style.css;
   the products are two places on it. Theme colours only, no inline styles. */
.isle { padding: 48px 0 16px; }
.isle h1 { margin: 0 0 16px; max-width: 18ch; }
.isle .lede { margin: 0 0 8px; }
.places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin: 40px 0 0; align-items: stretch; }
.place { background: color-mix(in srgb, var(--bg) 92%, transparent); border: 2px solid var(--line); border-radius: 20px;
  padding: 24px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 40px color-mix(in srgb, var(--fg) 10%, transparent); display: flex; flex-direction: column; gap: 16px; }
.place .who { display: flex; align-items: center; gap: 16px; }
.place .who img { width: 64px; height: 64px; border-radius: 16px; flex: none; }
.place h2 { margin: 0; font-size: 26px; line-height: 1.2; }
.place p { margin: 0; max-width: none; }
.place .shot { display: block; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); background: var(--soft); }
.place .shot img { vertical-align: top; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; object-position: center; } /* whole picture, nothing cut: the frames match, the pictures keep their own shape */ /* no display here: the theme rule (.when-dark/.when-light) hides the other picture */
.place .go { align-self: flex-start; margin-top: auto; } /* both buttons on one line */
.place:hover, .place:focus-within { border-color: var(--accent); }
@media (max-width: 720px) {
  .places { grid-template-columns: 1fr; gap: 24px; }
  .isle { padding-top: 32px; }
}

/* style.css shows .shot pictures as blocks; the theme pair inside a place's shot follows the theme again. */
.place .shot .when-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .place .shot .when-dark { display: block; }
  :root:not([data-theme="light"]) .place .shot .when-light { display: none; }
}
:root[data-theme="dark"] .place .shot .when-dark { display: block; }
:root[data-theme="dark"] .place .shot .when-light { display: none; }

/* What each tool does, in a few words: a short list under the picture. */
.place .perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px; font-size: 15px; line-height: 1.4; }
.place .perks li { position: relative; padding-left: 16px; }
.place .perks li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); }
@media (max-width: 960px) { .place .perks { grid-template-columns: 1fr; } }

/* The front page only (TODO 66, option A, "Two promises"). Built on style.css's tokens. */
.home section { padding-block: 64px; margin: 0; }
.home h1, .home h2, .home h3 { text-wrap: balance; line-height: 1.18; }
.home h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 700; margin: 0; max-width: none; letter-spacing: -.02em; }
.home h2 { font-size: clamp(25px, 3vw, 34px); font-weight: 700; margin: 0; }
.home h3 { margin: 0; }
.home p { margin: 0; }
.home .stack { display: grid; gap: 16px; align-content: start; }
.home .lead { font-size: 19px; color: var(--muted); max-width: 66ch; }
.home .small { font-size: 14px; }
.home .muted { color: var(--muted); }
.home .cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0; }
.home figure { margin: 0; }
.home figure img { border-radius: 10px; }

.home .hero-a { background: var(--beach) bottom / cover no-repeat, var(--bg); padding-block: 56px 72px; }
.home .hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .home .hero-grid { grid-template-columns: 1fr; } .home .hero-a { padding-block: 32px 48px; } }

.home .promises-sec { padding-top: 0; }
.home .promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.home .promise { background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 22px 24px; display: grid; gap: 8px; align-content: start; }
.home .promise .tag { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.home .promise h3 { font-size: 19px; font-weight: 650; }
@media (max-width: 760px) { .home .promises { grid-template-columns: 1fr; } }

.home .soft-band { background: var(--soft); }
.home .numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.home .num { background: var(--card); border-radius: 16px; padding: 20px 22px; color: var(--muted); font-size: 15px; }
.home .num b { display: block; font-size: 36px; line-height: 1.1; color: var(--fg); letter-spacing: -.02em; font-weight: 700; }
@media (max-width: 640px) { .home .numbers { grid-template-columns: 1fr; } }

.home .band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; }
.home .band.flip > .words { order: 2; }
.home .band + .band { margin-top: 72px; }
.home .band ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
@media (max-width: 900px) { .home .band { grid-template-columns: 1fr; gap: 24px; } .home .band.flip > .words { order: 0; } .home .band + .band { margin-top: 48px; } }

.home .plans { margin: 0; }
.home .plan { border-width: 2px; border-radius: 16px; display: grid; gap: 10px; align-content: start; }
.home .plan.main { border-color: var(--accent); }
.home .plan h3, .home .plan .price { margin: 0; }
.home .plan .price { font-size: 17px; font-weight: 650; color: var(--fg); }
.home .plan ul.ticks { margin: 0; }
.home .plan p { max-width: none; }

.home .req { background: var(--soft); border-radius: 16px; padding: 24px 26px; display: grid; gap: 10px; }
.home .req ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

.home .prod { border-radius: 14px; }
.home .wrap > .nl { margin-top: 0; }

/* Wording waiting for the text agent. */
.home .ph { outline: 2px dashed var(--coral); outline-offset: 2px; border-radius: 4px; text-transform: none; letter-spacing: 0; font-weight: 500; }
/* The hero's words over the beach: a veil of the page's own colour keeps them readable in both themes. */
.home .hero-grid > .stack { background: color-mix(in srgb, var(--bg) 84%, transparent); border-radius: 16px; padding: 20px 24px; }

/* Products in development: the same card, a quiet note where the picture would be. */
.place.soon .soon-note { color: var(--muted); font-size: 15px; }