/* PRO companion page: the main page's paper, typography, and screenshot story. */
.pro-page { --pro-red: #b01029; --pro-edge: #7a0e22; }
.pro-page .site-wrap { width: min(1250px, calc(100% - 80px)); }
.pro-page h1 { font-size: clamp(54px, 5.7vw, 82px); line-height: 1.08; }
.pro-page h2 { font-size: clamp(38px, 4vw, 56px); letter-spacing: -.035em; }
.pro-page h1 em { font-style: normal; color: var(--pro-red); }
.pro-page .site-nav-links a[aria-current="page"] { color: var(--pro-red); box-shadow: 0 2px var(--pro-red); }
.pro-page :focus-visible { outline-color: var(--pro-red); }
.pro-hero { padding: 80px 0 32px; background: radial-gradient(ellipse at 85% 30%, #f3dce480, transparent 60%), radial-gradient(ellipse at 60% 80%, #e8e4f380, transparent 55%); }
.pro-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; min-height: 520px; }
.pro-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; font-size: 18px; color: #555963; font-weight: 500; }
.pro-lead { font-size: 23px; color: #565a63; margin-top: 28px; max-width: 565px; }
.pro-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.pro-button { background: linear-gradient(135deg, #d93a50, #b01029 45%, #7a0e22); color: white; border-color: #b01029; }
.pro-button:hover { background: #7a0e22; color: white; }
.pro-note { margin-top: 22px; font-size: 15px; color: #666a73; }
.pro-wordmark { width: 300px; height: auto; margin: 0 auto 28px; }
.pro-hero-art .pro-shot { transform: rotate(-2deg); box-shadow: 0 24px 65px #571d2e20; }
.pro-art-note { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 30px; font-size: 16px; color: #66616b; }
.pro-art-note img { width: 48px; height: 48px; }
.pro-art-note strong { color: #14151b; font-weight: 600; }
.pro-promises { display: flex; justify-content: space-between; gap: 24px; margin-top: 65px !important; padding-top: 24px; border-top: 1px solid #e2dce1; font-size: 16px; color: #585b62; }
.pro-promises span::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #b01029; margin-right: 10px; vertical-align: middle; }
.pro-journey { display: flex; justify-content: center; gap: 30px; padding: 20px; border-bottom: 1px solid var(--line); font-size: 15px; flex-wrap: wrap; }
.pro-journey a:hover, .pro-text-link, .pro-faq a { color: var(--pro-red); }
.pro-section { padding: 100px 0; }
.pro-section-head { display: flex; align-items: end; justify-content: space-between; gap: 55px; margin-bottom: 48px; }
.pro-section-head > p { max-width: 420px; font-size: 20px; color: #585b62; }
.pro-shot { margin: 0; overflow: hidden; background: white; border: 1px solid #dce3ea; border-radius: 18px; box-shadow: 0 12px 40px #182a4510; }
.pro-shot img { display: block; width: 100%; height: auto; }
.pro-shot figcaption { padding: 17px 22px; font-size: 15px; color: #585b62; }
.pro-insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 45px; }
.pro-insights article > span { color: var(--pro-red); font-size: 14px; font-weight: 600; }
.pro-insights h3 { margin-top: 12px; }
.pro-insights p { margin-top: 16px; color: #585b62; font-size: 18px; }
.pro-wash { background: #eef2f6; }
.pro-heatmap { background: radial-gradient(ellipse at 75% 50%, #ede5f5, transparent 70%), #f6f8fb; }
.pro-course-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.pro-course { overflow: hidden; border: 1px solid #dce3ea; border-radius: 12px; background: white; box-shadow: 0 8px 20px #182a4509; }
.pro-course > img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.pro-course-copy { padding: 14px; }
.pro-course-copy h3 { margin-top: 9px; font-size: 19px; }
.pro-course-copy p { margin-top: 8px; color: #585b62; font-size: 14px; line-height: 1.5; }
.pro-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.pro-text-link { display: inline-flex; align-items: center; min-height: 48px; margin-top: 24px; font-size: 18px; font-weight: 600; }
.pro-text-link:hover { color: var(--pro-edge); text-decoration: underline; }
.pro-album-strip { display: flex; align-items: center; gap: 40px; max-width: 870px; margin: 60px auto 0; }
.pro-album-strip > img { width: 170px; height: 170px; border-radius: 15px; box-shadow: 0 12px 25px #11182720; transform: rotate(-4deg); }
.pro-album-strip p:not(.pro-eyebrow) { color: #585b62; margin-top: 16px; }
.pro-ink { background: #10151e; color: white; }
.pro-ink .pro-eyebrow, .pro-ink .pro-section-head > p { color: #b9c0cb; }
.pro-ink .pro-shot { border-color: #343b49; box-shadow: 0 20px 70px #0005; }
.pro-faq { display: grid; grid-template-columns: 1fr 1.3fr; gap: 70px; }
.pro-faq details { border-bottom: 1px solid #d2dae3; padding: 22px 0; }
.pro-faq summary { cursor: pointer; font-size: 20px; font-weight: 600; }
.pro-faq details p { color: #585b62; margin-top: 18px; }
.pro-faq a { text-decoration: underline; }
.pro-final { padding: 100px 0; text-align: center; background: radial-gradient(ellipse at 50% 60%, #f6dfe8a0, transparent 65%); }
.pro-final h2 { margin-top: 25px; }
.pro-final p { margin-top: 25px; color: #585b62; font-size: 22px; }
.pro-final .pro-actions { justify-content: center; }

/* XAML's normalized diagonal: atan(width / height) gives the CSS angle.
   Presets use their estimated dimensions; the angle follows actual rendered size. */
.pro-label { --badge-radius: 5px; --badge-font: 12px; --badge-padding: 2px 8px; --badge-angle: 63deg; --badge-line: 16px; position: relative; display: inline-flex; overflow: hidden; flex-shrink: 0; isolation: isolate; vertical-align: middle; border-radius: var(--badge-radius); padding: var(--badge-padding); background: linear-gradient(var(--badge-angle), #d93a50 0%, #b01029 45%, #7a0e22 100%); color: #fff; font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif; font-weight: 600; font-size: var(--badge-font); line-height: var(--badge-line); letter-spacing: 0; }
.pro-label-small { --badge-radius: 4px; --badge-font: 10px; --badge-padding: 1px 6px; --badge-angle: 64deg; --badge-line: 13px; }
.pro-label-large { --badge-radius: 7px; --badge-font: 14px; --badge-padding: 5px 12px; --badge-angle: 60deg; --badge-line: 19px; }
.pro-label-xlarge { --badge-radius: 6px; --badge-font: 18px; --badge-padding: 3px 26px; --badge-angle: 71deg; --badge-line: 24px; }
/* Opt in only. Width is 0.66 × badge height; #ffffff4d is the 30% center. */
.pro-label.is-animated::after { content: ''; position: absolute; inset-block: 0; left: 0; width: var(--sheen-width, 20px); background: linear-gradient(90deg, #ffffff00, #ffffff4d 50%, #ffffff00); transform: translateX(-160%) skewX(-20deg); pointer-events: none; animation: pro-sheen 5s ease-in-out infinite; }
@keyframes pro-sheen { 0%, 65% { left: 0; transform: translateX(-160%) skewX(-20deg); } 90%, 100% { left: 100%; transform: translateX(160%) skewX(-20deg); } }
@media (max-width: 1000px) { .pro-hero-grid { gap: 35px; } .pro-lead { font-size: 20px; } .pro-hero-art .pro-shot { transform: none; } .pro-section-head { gap: 35px; } }
@media (max-width: 850px) { .pro-hero-grid, .pro-faq { grid-template-columns: 1fr; } .pro-hero-grid { gap: 55px; } .pro-hero-art { max-width: 650px; width: 100%; margin: auto; } .pro-section-head { display: block; } .pro-section-head > p { max-width: 610px; margin-top: 24px; } .pro-insights { gap: 24px; } .pro-pair { grid-template-columns: 1fr; gap: 32px; } .pro-faq { gap: 25px; } }
@media (max-width: 600px) { .pro-page .site-wrap { width: calc(100% - 40px); } .pro-hero { padding-top: 50px; } .pro-page h1 { font-size: 52px; } .pro-page h2 { font-size: 36px; } .pro-section, .pro-final { padding: 65px 0; } .pro-promises { flex-direction: column; gap: 12px; margin-top: 40px !important; } .pro-journey { gap: 12px 20px; } .pro-insights { grid-template-columns: 1fr; gap: 30px; } .pro-shot { border-radius: 12px; } .pro-album-strip { align-items: start; gap: 24px; flex-direction: column; } .pro-album-strip > img { width: 130px; height: 130px; } .pro-wordmark { width: 250px; } .pro-eyebrow { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .pro-label.is-animated::after { animation: none; display: none; } }
@media (max-width: 1100px) { .pro-course-grid { grid-template-columns: repeat(5, 200px); overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; } .pro-course { scroll-snap-align: start; } }