/* Conversion page: daylight cards, a quiet reflection, and room to breathe. */
.hero-ocean .hero-layout { grid-template-columns: 1.15fr 1fr; min-height: 780px; gap: 48px; }
.hero-ocean .hero-copy { padding-block: 64px; }
.hero-ocean h1 { font-size: clamp(48px, 5.2vw, 76px); font-weight: 500; max-width: 12ch; }
.hero-ocean .hero-copy > p { max-width: 52ch; font-size: 16px; line-height: 1.75; color: #c4d2df; margin: 22px 0 0; }
.hero-ocean .hero-copy > .hero-intro { font-size: 18px; color: #dae4ec; }
.hero-copy strong { color: #f4f7fa; font-weight: 500; }
.hero-ocean .hero-copy > .hero-promise { color: #f3dfb8; font-size: 16px; font-weight: 500; }
.hero-ocean .actions { display: flex; flex-wrap: wrap; gap: 20px 28px; margin-top: 28px; align-items: center; }
.hero-ocean .button { font-size: 14px; }
.hero-secondary { display: inline-flex; gap: 14px; align-items: center; color: #f4f7fa; min-height: 44px; font-size: 14px; }
.hero-secondary:hover { color: var(--amber); }
.hero-ocean .hero-copy > .hero-price { margin-top: 18px; color: #b9ccdc; font-size: 13px; }
.hero-price span { padding-inline: 5px; }
.hero-ocean a:focus-visible { outline-color: var(--amber); }
.section-head h2, .center-head h2 { font-size: clamp(32px, 3.5vw, 44px); }
.section-head > div { min-width: 0; }
.section-head p { max-width: 42ch; }
.center-head p { max-width: 58ch; margin-inline: auto; }
.benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.benefit-card { padding: 32px 36px; border: 1px solid #dce3e9; border-radius: 22px; background: white; }
.benefit-card:first-child { background: #f4efe5; border-color: #e8dfce; }
.benefit-card:last-child { background: #edf2f6; }
.benefit-card h3 { max-width: 24ch; font-size: 24px; line-height: 1.3; margin: 24px 0 16px; }
.benefit-card p { max-width: 54ch; font-size: 16px; line-height: 1.8; }
.benefit-art { display: flex; position: relative; align-items: center; justify-content: center; width: 100px; height: 72px; color: var(--link-ink); font-family: var(--jakarta); }
.benefit-art i { font-style: normal; }
.price-art b { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #bda879; border-radius: 50%; font-size: 24px; font-weight: 500; color: var(--navy); background: #fbf8f1; }
.price-art i { width: 20px; height: 1px; background: #bda879; }
.orbit-art i { position: absolute; width: 80px; height: 46px; border: 1px solid #a9bdcc; border-radius: 50%; transform: rotate(-28deg); }
.orbit-art i::after { content: ''; position: absolute; top: 0; left: 12px; width: 6px; height: 6px; background: var(--amber); border-radius: 50%; box-shadow: 0 0 0 4px #d8b26e28; }
.orbit-art b { font-size: 35px; font-weight: 400; }
.tools-art i { border: 1px solid #9db3c5; border-radius: 10px; background: #f4f7fa; width: 55px; height: 44px; text-align: center; line-height: 35px; font-size: 28px; }
.tools-art i:last-child { margin: 22px 0 0 -12px; background: #e5edf4; font-size: 23px; }
.stars-art { gap: 12px; }
.stars-art b { font-size: 40px; color: #a17935; font-weight: 400; }
.stars-art i { font-size: 24px; }
.how-section { background: #edf2f6; border-block: 1px solid #dce3e9; }
.how-section .steps { gap: 36px; }
.how-section .step-no { color: #2b638a; font-size: 14px; }
.how-section .steps h3 { font-size: 22px; }
.sail-reflection { position: absolute; left: 50%; top: 335px; width: 250px; height: 165px; pointer-events: none; opacity: var(--reflection-light, .1); transform: translateX(-50%) scaleX(var(--reflection-width, 1)); transform-origin: 50% 0; background: repeating-linear-gradient(177deg, transparent 0 7px, #ebc78699 8px 9px, transparent 10px 16px); mask-image: radial-gradient(ellipse at 50% 0, black, transparent 70%); clip-path: polygon(43% 0, 57% 0, 92% 100%, 8% 100%); filter: blur(.5px); }
.benefits { position: relative; }
.shore-glow { position: absolute; top: 0; right: 6%; width: min(55%, 560px); height: 120px; background: radial-gradient(ellipse at 50% 0, #d8b26e90, transparent 68%); opacity: var(--shore-light, 0); pointer-events: none; }
.price-card .plan-purpose { font-size: 17px; font-weight: 600; line-height: 1.6; min-height: 0; margin: 0 0 16px; max-width: none; color: var(--navy); }
.price-card .short { min-height: 0; }
.pricing-grid .price-card ul { margin-top: 24px; }
.plan-footnote .technical-link { display: inline-block; min-height: 44px; padding-top: 12px; color: var(--link-ink); text-decoration: underline; text-underline-offset: 4px; }
.product-details .eyebrow { font-size: 11px; letter-spacing: .09em; }
.roster-label { font-size: 16px; margin-bottom: 18px; }
.model-roster { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.model-name { display: flex; flex-direction: column; gap: 12px; justify-content: center; padding: 22px 18px; background: white; font-size: 14px; line-height: 1.5; }
.model-name > span { color: #a17a39; font-size: 23px; line-height: 1; }
.roster-note { color: var(--muted-ink); font-size: 14px; }
.faq { border-top: 1px solid #dce3e9; }
.faq-items p + p { margin-top: 16px; }
.technical-section { padding-bottom: 80px; }
#technical-details { border: 1px solid #cbd7e1; border-radius: 16px; padding: 0 28px; scroll-margin-top: 112px; }
#technical-details > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-block: 22px; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--navy); }
#technical-details > summary::before { content: '+'; color: var(--link-ink); font-size: 24px; line-height: 1; }
#technical-details[open] > summary::before { content: '−'; }
#technical-details > summary::after { content: none; }
#technical-details summary > span { margin-left: auto; font-size: 14px; font-weight: 400; color: var(--muted-ink); }
#technical-details .decision-grid { padding: 24px 0 16px; border-top: 1px solid #dce3e9; }
.closing .wrap { max-width: 1000px; }
.closing h2 { font-size: clamp(32px, 3.8vw, 48px); line-height: 1.22; margin-bottom: 28px; }
.closing p { max-width: 62ch; color: #c6d5e2; font-size: 16px; line-height: 1.8; margin: 16px auto 0; }
.closing .closing-promise { color: #f2dfb9; font-weight: 500; }
.closing .button { margin-top: 32px; }
@media (max-width: 1000px) {
 .hero-ocean .hero-layout { gap: 20px; grid-template-columns: 1.3fr 1fr; }
 .hero-ocean h1 { font-size: 56px; }
 .hero-ocean .dream-scene { min-width: 0; }
 .benefit-card { padding: 28px; }
 .model-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
 .hero-ocean .hero-layout { grid-template-columns: 1fr; padding-top: 0; }
 .hero-ocean .hero-copy { padding-block: 40px 0; }
 .hero-ocean h1 { font-size: clamp(42px, 11.5vw, 64px); max-width: 12ch; }
 .hero-ocean .hero-copy > p { font-size: 16px; line-height: 1.75; margin-top: 18px; }
 .hero-ocean .hero-copy > .hero-intro { font-size: 17px; }
 .hero-ocean .hero-copy > .hero-price { font-size: 13px; }
 .hero-ocean .dream-scene { height: 280px; margin-top: 0; }
 .sail-reflection { top: 220px; width: 190px; height: 100px; }
 .shore-glow { width: 70%; right: 15%; height: 80px; }
 .hero-ocean .actions { gap: 16px 24px; }
 .benefit-grid { grid-template-columns: 1fr; gap: 16px; }
 .benefit-card { padding: 26px; }
 .benefit-card h3 { font-size: 23px; margin-top: 18px; }
 .benefit-art { height: 54px; }
 .how-section .steps { gap: 24px; }
 .model-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
 .model-name { padding: 18px; }
 .technical-section { padding-bottom: 56px; }
 #technical-details { padding-inline: 20px; }
 #technical-details summary > span { width: 100%; margin-left: 0; font-size: 13px; }
 #technical-details .decision-grid { gap: 24px; }
 .closing { padding-block: 64px; }
 .closing h2 br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
 .sail-reflection { opacity: .1; transform: translateX(-50%); }
 .shore-glow { opacity: 0; }
}