.product-hero { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.product-hero .eyebrow { display: flex; align-items: center; gap: 0.7rem; }
.product-hero h1 { max-width: 20ch; margin-bottom: 1.5rem; }
.product-hero h1 span { color: var(--purple); }
.product-lede { max-width: 43rem; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.2rem); }
.product-hero .product-lede:last-child { margin-bottom: 0; }
.product-section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.product-section-heading { max-width: 45rem; margin-bottom: 2rem; }
.product-section-heading h2 { margin-bottom: 0; }
.product-app-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
.product-app-intro { min-width: 0; }
.product-device-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 1.5rem; padding: 2rem; border-radius: 22px; background: var(--night); color: var(--paper); }
.product-device { min-width: 0; margin: 0; text-align: center; }
.product-device img { display: block; width: 100%; height: auto; margin-inline: auto; border: 2px solid #6e6b74; background: #000; }
.product-device-watch img { max-width: 122px; border-radius: 26px; }
.product-device-phone img { max-width: 112px; border-radius: 18px; }
.product-device-ipad img { border-radius: 10px; }
.product-device-mac img { border-radius: 7px; }
.product-device figcaption { margin-top: 0.65rem; font-size: 0.8rem; font-weight: 600; }
.product-device-note { grid-column: 1 / -1; margin: 0; text-align: center; color: #ccc5d6; font-size: 0.72rem; }
.product-how { background: #eee9df; }
.product-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; list-style: none; padding: 0; margin: 0; }
.product-steps li { min-width: 0; }
.product-steps li > span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 1.2rem; border: 1px solid #c6baca; border-radius: 50%; color: var(--purple); font-size: 0.8rem; font-weight: 650; }
.product-steps h3 { margin-bottom: 0.7rem; }
.product-steps p { color: var(--muted); margin-bottom: 0; }
.product-flow-note { max-width: 54rem; margin: 2rem 0 0; color: var(--muted); font-size: 0.88rem; }
.product-flow-note a, .product-start-link a, .product-plan-notes a, .product-usage a, .product-support a:not(.button) { color: var(--purple); }
.product-extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.product-extra { border-top: 3px solid var(--purple); padding-top: 1.5rem; }
.product-extra:nth-child(2) { border-color: #dd514b; }
.product-extra:nth-child(3) { border-color: #5b986a; }
.product-extra h3 { margin-bottom: 0.8rem; }
.product-extra p { color: var(--muted); margin-bottom: 0; }
.product-inline-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 1.8rem; }
.product-gallery { background: #eee9df; }
.product-gallery .screenshot-strip > a { flex-basis: 230px; }
.product-next { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-block: 3rem; }
.product-next p { margin: 0; max-width: 32rem; color: var(--muted); }
.product-next .button { flex-shrink: 0; }
.product-plans { padding-top: 0; }
.product-starter { display: grid; grid-template-columns: 1fr 1.5fr; align-items: center; gap: 2rem; padding: clamp(1.5rem, 3vw, 2.2rem); border: 1px solid var(--line); border-radius: 18px; background: #eee9df; }
.product-starter .eyebrow { margin-bottom: 0.6rem; }
.product-starter h2 { margin-bottom: 0.6rem; font-size: 2.4rem; }
.product-starter p:last-child { margin-bottom: 0; color: var(--muted); }
.product-starter ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1.5rem; padding-left: 1.1rem; margin: 0; font-size: 0.9rem; }
.product-addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.product-addon { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: clamp(1.5rem, 3vw, 2.2rem); border: 1px solid var(--line); border-radius: 20px; background: #fffcf5; }
.product-addon-premium { background: #eee7f7; border-color: #b5a0d1; }
.product-addon .eyebrow { margin-bottom: 1rem; }
.product-addon h2 { margin-bottom: 0.45rem; font-size: 2.7rem; }
.product-addon-kind { font-weight: 650; }
.product-addon ul { width: 100%; padding: 0; margin: 0 0 1.5rem; list-style: none; }
.product-addon li { padding-block: 0.55rem; border-bottom: 1px solid #dcd5e1; }
.product-addon-boundary { color: var(--muted); font-size: 0.9rem; margin-top: auto; margin-bottom: 0.7rem; }
.product-addon .text-link { font-size: 0.9rem; }
.product-combination { margin: 1.5rem 0; padding-inline: 0.2rem; }
.product-offer-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding-block: 1rem; border-block: 1px solid var(--line); }
.product-offer-status p { margin: 0; font-size: 0.9rem; }
.product-offer-status .text-link { font-size: 0.85rem; }
.product-plan-notes { max-width: 65rem; margin-top: 1.5rem; color: var(--muted); font-size: 0.82rem; }
.product-plan-notes p:last-child { margin-bottom: 0; }
.product-usage { background: #eee9df; }
.product-usage-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; }
.product-faq { padding-top: 0; }
.product-faq .faq-list { max-width: 52rem; }
.product-start-link { padding-bottom: 2.5rem; }
.product-start-link p { margin: 0; color: var(--muted); }
.product-private { background: #e4eadf; }
.product-private .privacy-layout { align-items: start; }
.product-private h2 { margin-bottom: 0; }
.product-private p { color: #4e5849; }
.product-private .privacy-list { margin-top: 0; }
.product-support { padding-block: 3rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.product-support h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 0.7rem; }
.product-support p { color: var(--muted); margin-bottom: 0; }
.product-release { padding-block: clamp(3rem, 7vw, 6rem); }
.product-release h1 { max-width: 22ch; }
.product-release-status { max-width: 40rem; color: var(--muted); font-size: 0.95rem; }
@media (max-width: 1000px) {
  .product-app-hero { gap: 2rem; }
  .product-device-gallery { padding: 1.3rem; }
  .product-steps, .product-extras { gap: 1.4rem; }
}
@media (max-width: 800px) {
  .product-app-hero, .product-usage-layout { grid-template-columns: 1fr; }
  .product-device-gallery { width: min(100%, 500px); justify-self: center; padding: 1.5rem; }
  .product-device-watch img { max-width: 105px; }
  .product-device-phone img { max-width: 98px; }
  .product-steps, .product-extras { grid-template-columns: 1fr; gap: 1.7rem; }
  .product-steps li { display: grid; grid-template-columns: 38px 1fr; column-gap: 1rem; }
  .product-steps li > span { grid-row: 1 / 3; margin: 0; }
  .product-steps h3, .product-steps p { grid-column: 2; }
  .product-next, .product-support { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
  .product-starter { grid-template-columns: 1fr; gap: 1.2rem; }
  .product-addons { grid-template-columns: 1fr; }
  .product-usage-layout { gap: 1.5rem; }
  .product-usage-layout h2 { margin-bottom: 0; }
}
@media (max-width: 540px) {
  .product-hero h1 { font-size: clamp(2.7rem, 10vw, 3.6rem); }
  .product-hero .eyebrow { font-size: 0.65rem; }
  .product-device-gallery { gap: 1rem; }
  .product-device-note { font-size: 0.66rem; }
  .product-starter ul { grid-template-columns: 1fr; gap: 0.6rem; }
  .product-addon li { font-size: 0.92rem; }
  .product-gallery .screenshot-strip > a { flex-basis: min(220px, 70vw); }
}