.product-page { min-height: 100vh; }
.product-header,.product-main { width: min(1200px, calc(100% - 64px)); margin: auto; }
.product-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 28px 0; }
.product-header .brand { margin: 0; }
.product-main { padding-bottom: 32px; }
.product-hero { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 270px; align-items: center; gap: 32px; padding: 64px 52px; border: 2px solid #75668c; border-radius: 28px; background: linear-gradient(90deg,#11192df5,#171f35c9 50%,#20233c38),url('/assets/desk-landscape.png') right 82% / cover; box-shadow: 0 9px 0 #090e1bd9,0 24px 60px #0003; }
.product-hero h1 { font-size: clamp(40px,5vw,66px); letter-spacing: -2.2px; margin-bottom: 24px; }
.product-hero .eyebrow { color: #d1bef7; }
.product-lede { max-width: 510px; font-size: 17px; color: #c5d0e4; line-height: 1.8; margin-bottom: 26px; }
.product-hero .button-row { margin-bottom: 18px; }
.product-sticky-note { position: relative; background: #17233bf2; border: 2px solid #afa0d1; border-radius: 23px; padding: 30px 24px; box-shadow: 5px 7px 0 #090f21a6; transform: rotate(2deg); }
.product-sticky-note h2 { font-size: 27px; line-height: 1.35; color: #f3f0ff; }
.product-sticky-note p:not(.eyebrow) { color: #becae0; line-height: 1.9; }
.product-sticky-note .badge { white-space: normal; }
.product-note-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid #8ae8c5; border-radius: 15px; background: #284539; color: #adf5d9; margin-bottom: 20px; font-size: 25px; transform: rotate(-8deg); }
.product-features { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; margin: 35px 0 12px; }
.product-features article > span { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #342e50; color: #c6b4ff; border: 1px solid #70618f; font-size: 25px; margin-bottom: 18px; }
.product-features h2 { font-size: 18px; line-height: 1.5; }
.product-features p { color: #b2bfd6; margin-bottom: 0; }
.product-setup { scroll-margin-top: 18px; padding: 32px; }
.product-setup-heading { display: flex; align-items: start; justify-content: space-between; gap: 24px; }
.product-setup-heading h2 { font-size: 27px; }
.product-setup-heading p { max-width: 660px; }
.product-notice { padding: 15px 18px; background: #282744; border: 1px solid #655a89; border-radius: 13px; color: #ddd2ff; overflow-wrap: anywhere; }
.product-notice[data-tone="success"] { background: #19372e; border-color: #4e8c76; color: #b9eed9; }
.product-notice[data-tone="error"] { background: #3b2534; border-color: #8e5269; color: #ffcedd; }
.product-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 28px 0; }
.product-steps article { min-width: 0; padding: 22px; border: 1px solid #475475; border-radius: 18px; background: #182238; }
.product-steps h3 { font-size: 16px; margin: 18px 0 10px; }
.product-step-number { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #8d77b6; color: #e0d0ff; background: #3a2f54; border-radius: 10px; font-weight: 750; }
.product-steps .button,.product-steps .text-button { width: 100%; margin-top: 8px; }
.product-steps p { overflow-wrap: anywhere; }
.product-steps select { display: block; background: #10192c; color: #eef1fc; width: 100%; min-height: 44px; border: 1px solid #8e7db4; padding: 8px; border-radius: 10px; margin: 8px 0; }
.product-footer { text-align: center; color: #b2bfd6; padding: 22px 0 6px; font-size: 12px; }
.product-footer p:last-child { color: #94a5c0; }
.product-skip { position: absolute; top: -100px; left: 20px; z-index: 5; padding: 12px; background: #182338; border-radius: 8px; }
.product-skip:focus { top: 12px; }
@media(max-width:900px) { .product-hero { padding: 42px 30px; grid-template-columns: minmax(0,1fr) 220px; gap: 20px; }.product-steps { gap: 12px; }.product-steps article { padding: 16px; }.product-setup-heading { display: block; }.product-setup-heading > a { margin-bottom: 18px; } }
@media(max-width:700px) { .product-header,.product-main { width: calc(100% - 32px); }.product-header { padding: 20px 0; }.product-header .brand { font-size: 18px; gap: 8px; }.product-header > .button { padding: 8px 10px; }.product-hero { display: block; padding: 34px 23px; border-radius: 22px; }.product-hero h1 { font-size: 43px; letter-spacing: -1.4px; }.product-lede { font-size: 15px; }.product-sticky-note { margin: 30px 8px 0; padding: 23px; }.product-sticky-note h2 br { display: none; }.product-sticky-note h2 { font-size: 23px; }.product-features,.product-steps { grid-template-columns: minmax(0,1fr); gap: 16px; }.product-features .panel { margin-bottom: 0; }.product-features { margin-bottom: 26px; }.product-setup { padding: 23px 18px; }.product-setup-heading h2 { font-size: 24px; }.product-steps article { padding: 20px; }.product-footer { padding: 18px 12px; } }
@media(prefers-reduced-motion:reduce) { .product-page * { transition: none!important; animation: none!important; } }