/* Approved Pearl prototype styles, scoped to public pages only. */
#app .pearl-page { min-height: 100vh; color-scheme: light; font-size: 16px; line-height: normal; }
#app .pearl-page :is(header, nav, main, section, article, footer, div, h1, h2, h3, p, span, a, button, input, label, fieldset, legend, ul, li, details, summary) { text-transform: none; }
#app .pearl-page :is(h1, h2, h3, p) { max-width: none; }
#app .pearl-page .pricing-page { padding: 0; margin: 0; width: 100%; max-width: none; background: transparent; }
#app .pearl-page .brand { min-width: 0; }
#app .pearl-page .icon { stroke-width: 1.65; }
#app .pearl-page .nav-links { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; width: auto; overflow: visible; }
#app .pearl-page .plan-card { gap: 0; }
#app .pearl-page * { box-sizing: border-box; letter-spacing: 0px; }
#app .pearl-page { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; color: rgb(36, 39, 41); background: rgb(251, 252, 252); font-synthesis: none; --bg: #fbfcfc; --ink: #242729; --muted: #676d72; --line: #dce0e1; --soft: #eef2f1; --gold: #e9bf54; --accent: #907021; --glass: #ffffffa8; --card: #ffffffb8; --shadow: 0 16px 48px #2130320a; }
#app .pearl-page { margin: 0px; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
#app .pearl-page button, #app .pearl-page input { font: inherit; }
#app .pearl-page button, #app .pearl-page a { -webkit-tap-highlight-color: transparent; }
#app .pearl-page button { cursor: pointer; }
#app .pearl-page a { color: inherit; text-decoration: none; }
#app .pearl-page button { color: inherit; }
#app .pearl-page button, #app .pearl-page summary, #app .pearl-page a { touch-action: manipulation; }
#app .pearl-page :focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
#app .pearl-page button, #app .pearl-page a, #app .pearl-page summary { transition: background 0.18s, color 0.18s, box-shadow 0.18s; }
#app .pearl-page button:hover, #app .pearl-page a:hover { text-decoration: none; }
#app .pearl-page p { line-height: 1.65; margin: 0px; }
#app .pearl-page h1, #app .pearl-page h2, #app .pearl-page h3 { margin: 0px; font-weight: 600; line-height: 1.1; }
#app .pearl-page h2 { font-size: 44px; }
#app .pearl-page h3 { font-size: 23px; }
#app .pearl-page .wrap { width: min(1200px, 100% - 96px); margin-inline: auto; }
#app .pearl-page .icon { width: 19px; height: 19px; flex-shrink: 0; vertical-align: middle; }
#app .pearl-page .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--accent); }
#app .pearl-page .status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentcolor; }
#app .pearl-page .site-header { position: sticky; top: 0px; z-index: 20; height: 86px; margin-bottom: -86px; padding-top: 18px; }
#app .pearl-page .nav-shell { display: flex; align-items: center; justify-content: space-between; position: relative; width: min(1248px, 100% - 64px); height: 62px; margin: auto; padding: 0px 18px 0px 22px; border: 1px solid rgba(255, 255, 255, 0.66); border-radius: 50px; background: var(--glass); backdrop-filter: blur(22px) saturate(135%); box-shadow: rgba(41, 50, 57, 0.027) 0px 5px 24px, rgba(255, 255, 255, 0.6) 0px 1px 0px inset; }
#app .pearl-page .brand { font-size: 21px; font-weight: 700; display: inline-flex; gap: 9px; align-items: center; white-space: nowrap; }
#app .pearl-page .brand img { width: 30px; height: 30px; object-fit: contain; }
#app .pearl-page .brand-suffix { color: var(--muted); font-weight: 500; }
#app .pearl-page .nav-links { display: flex; gap: 34px; align-items: center; font-size: 12px; }
#app .pearl-page .nav-links > a:hover, #app .pearl-page .text-button:hover { color: var(--accent); }
#app .pearl-page .nav-links [aria-current] { color: var(--accent); }
#app .pearl-page .text-button { border: 0px; padding: 0px; background: transparent; }
#app .pearl-page .nav-right { display: flex; align-items: center; gap: 12px; }
#app .pearl-page .button { display: inline-flex; min-height: 48px; padding: 0px 23px; align-items: center; justify-content: center; gap: 16px; border: 1px solid transparent; border-radius: 40px; font-size: 13px; font-weight: 600; white-space: normal; line-height: 1.35; text-align: center; }
#app .pearl-page .button.primary { background: var(--gold); border-color: rgb(217, 174, 69); color: rgb(40, 36, 28); box-shadow: rgba(255, 255, 255, 0.44) 0px 1px 0px inset, rgba(162, 122, 30, 0.075) 0px 4px 14px; }
#app .pearl-page .button.primary:hover { background: rgb(243, 204, 108); box-shadow: rgba(162, 122, 30, 0.157) 0px 5px 20px; }
#app .pearl-page .button.glass { background: rgba(255, 255, 255, 0.5); border-color: rgb(255, 255, 255); backdrop-filter: blur(18px); box-shadow: rgba(22, 33, 37, 0.02) 0px 3px 20px; }
#app .pearl-page .button.glass:hover { background: rgba(255, 255, 255, 0.85); }
#app .pearl-page .button.secondary { border-color: var(--line); background: transparent; }
#app .pearl-page .button.secondary:hover { background: var(--soft); }
#app .pearl-page .button.nav-cta { background: var(--ink); color: var(--bg); min-height: 36px; font-size: 11px; padding-inline: 16px; gap: 10px; }
#app .pearl-page .nav-cta .icon { width: 14px; height: 14px; }
#app .pearl-page .icon-button { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 0px; border-radius: 50%; background: transparent; }
#app .pearl-page .icon-button:hover { background: var(--soft); }
#app .pearl-page .menu-toggle { display: none; }
#app .pearl-page .hero { position: relative; isolation: isolate; height: min(720px, -118px + 100svh); min-height: 560px; overflow: hidden; background: rgb(233, 237, 242); }
#app .pearl-page .hero-art { width: 100%; height: 100%; position: absolute; inset: 0px; object-fit: cover; object-position: center center; z-index: -1; }
#app .pearl-page .hero-inner { height: 100%; display: flex; align-items: center; position: relative; padding-top: 62px; }
#app .pearl-page .hero-copy { width: 55%; padding-bottom: 10px; }
#app .pearl-page .hero-eyebrow { color: rgb(87, 94, 97); font-size: 12px; margin-bottom: 22px; }
#app .pearl-page .hero h1 { font-size: 98px; line-height: 1.02; font-weight: 650; }
#app .pearl-page .hero-statement { font-size: 34px; font-weight: 500; line-height: 1.19; margin-top: 14px; }
#app .pearl-page .hero-description { font-size: 14px; color: rgb(98, 105, 110); margin-top: 22px; line-height: 1.7; }
#app .pearl-page .hero-actions { display: flex; gap: 10px; margin-top: 28px; }
#app .pearl-page .hero-note { font-size: 11px; color: rgb(110, 116, 122); margin-top: 16px; }
#app .pearl-page .hero-note span { margin-inline: 8px; }
#app .pearl-page .hero-caption { position: absolute; left: 0px; right: 0px; bottom: 22px; display: flex; justify-content: space-between; color: rgb(113, 120, 124); font-size: 10px; }
#app .pearl-page .exam-strip { background: rgb(255, 255, 255); border-bottom: 1px solid var(--line); }
#app .pearl-page .exam-strip > .wrap { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
#app .pearl-page .exam-strip > .wrap > span { font-size: 12px; color: var(--muted); }
#app .pearl-page .exam-strip .wrap > div { display: flex; align-items: center; gap: 58px; }
#app .pearl-page .exam-strip b { font-size: 20px; font-weight: 650; white-space: nowrap; }
#app .pearl-page .exam-strip b span { font-size: 12px; font-weight: 400; color: var(--muted); }
#app .pearl-page .steps-section { padding-block: 94px; }
#app .pearl-page .section-intro .eyebrow { margin-bottom: 16px; }
#app .pearl-page .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 52px; }
#app .pearl-page .steps-grid article { padding-top: 20px; border-top: 1px solid var(--line); }
#app .pearl-page .step-num { color: var(--accent); font-size: 12px; }
#app .pearl-page .steps-grid h3 { margin: 24px 0px 14px; font-size: 21px; }
#app .pearl-page .steps-grid p { font-size: 14px; color: var(--muted); max-width: 275px; }
#app .pearl-page .experience { background: rgb(238, 243, 242); padding-block: 90px; scroll-margin-top: 96px; }
#app .pearl-page .experience-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 100px; }
#app .pearl-page .experience-copy > .eyebrow { margin-bottom: 18px; }
#app .pearl-page .experience-copy h2 { font-size: 40px; }
#app .pearl-page .experience-copy > p { font-size: 14px; color: var(--muted); max-width: 340px; margin-top: 18px; }
#app .pearl-page .experience-tabs { display: grid; margin-top: 34px; }
#app .pearl-page .experience-tabs button { display: flex; align-items: center; text-align: left; gap: 14px; padding: 18px 14px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(213, 222, 219); border-image: none; background: transparent; font-size: 14px; }
#app .pearl-page .experience-tabs button > span { flex: 1 1 0%; }
#app .pearl-page .experience-tabs button small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 6px; }
#app .pearl-page .experience-tabs button[aria-selected="true"] { color: rgb(53, 100, 86); background: rgb(224, 233, 229); }
#app .pearl-page .experience-tabs button > svg:last-child { width: 15px; }
#app .pearl-page .sample-panel { border: 1px solid rgb(255, 255, 255); border-radius: 8px; background: rgba(255, 255, 255, 0.75); padding: 30px; box-shadow: rgba(36, 62, 50, 0.063) 0px 24px 60px, rgb(255, 255, 255) 0px 1px 0px inset; min-height: 410px; }
#app .pearl-page .sample-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); margin-bottom: 32px; }
#app .pearl-page .sample-title > span:first-child { display: flex; align-items: center; gap: 8px; }
#app .pearl-page .sample-title .icon { color: rgb(66, 119, 101); width: 17px; }
#app .pearl-page .sample-tag { font-size: 10px; color: rgb(108, 119, 113); }
#app .pearl-page .sample-panel h3 { font-size: 22px; line-height: 1.3; max-width: 310px; }
#app .pearl-page .passage, #app .pearl-page .sample-subtitle { margin-top: 14px; font-size: 13px; line-height: 1.8; color: var(--muted); }
#app .pearl-page .sample-question { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
#app .pearl-page .sample-question .eyebrow { font-size: 10px; color: var(--muted); }
#app .pearl-page .sample-question p { margin-top: 8px; font-size: 13px; line-height: 1.5; }
#app .pearl-page .answer-preview { display: flex; gap: 9px; align-items: center; padding: 12px 0; font-size: 12px; color: #356456; margin-top: 8px; }
#app .pearl-page .fine-print { color: var(--muted); font-size: 10px; line-height: 1.6; margin-top: 24px; }
#app .pearl-page .criteria { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; gap: 16px; }
#app .pearl-page .criteria span { font-size: 10px; color: var(--muted); }
#app .pearl-page .criteria b { display: block; font-size: 24px; margin-top: 6px; color: var(--ink); font-weight: 500; }
#app .pearl-page .feedback-example { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 15px; }
#app .pearl-page .feedback-example .eyebrow { font-size: 10px; }
#app .pearl-page .feedback-example p { margin-top: 5px; font-size: 12px; color: var(--muted); }
#app .pearl-page .week-list { margin-top: 24px; }
#app .pearl-page .week-list > div { padding: 17px 0px; display: flex; gap: 20px; align-items: center; border-top: 1px solid var(--line); }
#app .pearl-page .week-list b { font-size: 10px; color: var(--accent); font-weight: 500; }
#app .pearl-page .week-list span { font-size: 13px; flex: 1 1 0%; }
#app .pearl-page .week-list small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
#app .pearl-page .week-list em { font-size: 10px; font-style: normal; color: var(--muted); }
#app .pearl-page .closing { padding: 90px 0px; text-align: center; background: rgb(244, 246, 247); }
#app .pearl-page .closing .eyebrow { margin-bottom: 16px; }
#app .pearl-page .closing h2 { font-size: 44px; }
#app .pearl-page .closing p { color: var(--muted); font-size: 15px; margin: 18px 0px 25px; }
#app .pearl-page .closing-note { display: block; color: var(--muted); font-size: 10px; margin-top: 15px; }
#app .pearl-page .footer { padding-top: 46px; padding-bottom: 22px; }
#app .pearl-page .footer-top { display: flex; align-items: center; gap: 32px; padding-bottom: 40px; }
#app .pearl-page .footer-top p { font-size: 12px; color: var(--muted); flex: 1 1 0%; }
#app .pearl-page .text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--accent); border: 0px; background: transparent; padding: 0px; }
#app .pearl-page .text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
#app .pearl-page .text-link .icon { width: 14px; height: 14px; }
#app .pearl-page .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--line); padding-top: 20px; font-size: 10px; color: var(--muted); }
#app .pearl-page .footer-bottom > div { display: flex; gap: 22px; }
#app .pearl-page .footer-bottom button { border: 0px; background: transparent; padding: 0px; font-size: 10px; }
#app .pearl-page .pricing-heading { text-align: center; padding-top: 145px; padding-bottom: 48px; }
#app .pearl-page .pricing-heading h1 { font-size: 64px; margin-top: 16px; }
#app .pearl-page .pricing-heading > p { color: var(--muted); font-size: 17px; line-height: 1.65; margin-top: 22px; }
#app .pearl-page .access-grid { display: grid; grid-template-columns: 1fr 1fr; max-width: 960px; margin: 0px auto; gap: 24px; }
#app .pearl-page .access-card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 30px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
#app .pearl-page .access-card.featured { border-color: rgb(210, 181, 103); background: rgb(253, 252, 248); box-shadow: rgba(156, 126, 50, 0.063) 0px 12px 48px, rgb(238, 215, 155) 0px 2px 0px inset; }
#app .pearl-page .access-label { font-size: 11px; color: var(--muted); display: flex; gap: 7px; align-items: center; min-height: 22px; }
#app .pearl-page .access-label > .icon { width: 16px; height: 16px; }
#app .pearl-page .small-badge { margin-left: auto; font-size: 9px; font-weight: 600; background: rgb(239, 229, 199); color: rgb(126, 100, 30); padding: 4px 7px; border-radius: 4px; }
#app .pearl-page .access-card h2 { font-size: 29px; margin: 19px 0px 10px; }
#app .pearl-page .access-desc { color: var(--muted); font-size: 13px; }
#app .pearl-page .price { display: flex; flex-direction: column; gap: 5px; margin: 24px 0px; }
#app .pearl-page .price b { font-size: 58px; font-weight: 500; line-height: 1.1; }
#app .pearl-page .price span { font-size: 11px; color: var(--muted); }
#app .pearl-page .access-card .button { width: 100%; min-height: 44px; }
#app .pearl-page .included-list { display: grid; gap: 15px; list-style: none; padding: 24px 0px 0px; margin: 24px 0px 0px; border-top: 1px solid var(--line); }
#app .pearl-page .included-list li { font-size: 12px; line-height: 1.5; display: flex; align-items: flex-start; gap: 9px; }
#app .pearl-page .included-list .icon { width: 15px; height: 18px; color: rgb(80, 118, 94); }
#app .pearl-page .card-note { display: block; color: var(--muted); font-size: 10px; line-height: 1.6; margin-top: 24px; }
#app .pearl-page .access-card .card-note { padding-top: 24px; margin-top: auto; }
#app .pearl-page .pricing-fine { max-width: 820px; margin: 25px auto 0px; font-size: 11px; text-align: center; color: var(--muted); }
#app .pearl-page .pricing-offers { padding-top: 0px; }
#app .pearl-page .billing-picker { display: flex; width: max-content; max-width: 100%; margin: 0px auto; padding: 5px; gap: 4px; background: rgb(237, 240, 241); border: 1px solid rgb(224, 228, 229); border-radius: 40px; box-shadow: rgba(39, 51, 50, 0.02) 0px 1px 2px inset; }
#app .pearl-page .billing-picker label { position: relative; display: block; cursor: pointer; }
#app .pearl-page .billing-picker input { position: absolute; inset: 0px; width: 100%; height: 100%; margin: 0px; opacity: 0; cursor: pointer; }
#app .pearl-page .billing-picker span { display: block; border-radius: 30px; padding: 12px 25px; min-width: 110px; font-size: 12px; text-align: center; color: var(--muted); }
#app .pearl-page .billing-picker input:checked + span { background: rgb(255, 255, 255); color: var(--ink); box-shadow: rgba(27, 42, 48, 0.063) 0px 2px 6px, rgb(255, 255, 255) 0px 1px 0px inset; }
#app .pearl-page .billing-picker input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
#app .pearl-page .billing-caption { color: var(--muted); font-size: 11px; text-align: center; margin: 17px 0px 30px; }
#app .pearl-page .plan-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); max-width: none; gap: 22px; }
#app .pearl-page .plan-card { min-width: 0px; padding: 29px; background: rgba(255, 255, 255, 0.79); }
#app .pearl-page .plan-card.featured { background: rgb(253, 252, 248); border-color: rgb(218, 193, 124); box-shadow: rgba(150, 120, 43, 0.047) 0px 16px 50px, rgb(233, 191, 84) 0px 2px 0px inset; }
#app .pearl-page .plan-card.pro-card { background: rgb(242, 246, 245); border-color: rgb(212, 224, 219); }
#app .pearl-page .plan-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
#app .pearl-page .plan-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgb(237, 241, 242); color: rgb(100, 112, 118); }
#app .pearl-page .featured .plan-icon { background: rgb(246, 236, 208); color: rgb(139, 109, 29); }
#app .pearl-page .pro-card .plan-icon { background: rgb(225, 235, 229); color: rgb(77, 121, 103); }
#app .pearl-page .plan-badge { font-size: 10px; color: var(--muted); }
#app .pearl-page .featured .plan-badge { color: rgb(137, 112, 43); }
#app .pearl-page .pro-card .plan-badge { color: rgb(71, 116, 95); }
#app .pearl-page .plan-card h2 { margin-top: 23px; }
#app .pearl-page .plan-card .access-desc { min-height: 44px; }
#app .pearl-page .plan-card .price { height: 81px; margin: 27px 0px 0px; }
#app .pearl-page .price-value { display: flex; align-items: baseline; gap: 8px; }
#app .pearl-page .price .price-amount { font-size: 50px; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
#app .pearl-page .price .price-period { font-size: 11px; white-space: nowrap; }
#app .pearl-page .price .price-billing { margin-top: 6px; display: block; }
#app .pearl-page .plan-saving { color: rgb(60, 117, 97); font-size: 11px; min-height: 17px; line-height: 17px; margin: 2px 0px 18px; }
#app .pearl-page .plan-card .included-list { gap: 16px; margin-top: 25px; padding-top: 25px; }
#app .pearl-page .plan-card .card-note { font-size: 10px; line-height: 1.65; padding-top: 25px; min-height: 59px; }
#app .pearl-page .pricing-fine strong { font-weight: 500; color: rgb(76, 85, 88); }
#app .pearl-page .reading-invitation { margin-top: 60px; padding-block: 35px; border-block: 1px solid var(--line); display: flex; align-items: center; gap: 22px; }
#app .pearl-page .reading-invitation > div { flex: 1 1 0%; }
#app .pearl-page .invitation-icon { color: rgb(106, 119, 112); }
#app .pearl-page .invitation-icon > .icon { width: 26px; height: 26px; }
#app .pearl-page .reading-invitation h2 { font-size: 23px; }
#app .pearl-page .reading-invitation p { font-size: 12px; color: var(--muted); margin-top: 10px; }
#app .pearl-page .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0px; }
#app .pearl-page .faq { display: grid; grid-template-columns: 1fr 1.3fr; gap: 100px; padding-block: 80px; scroll-margin-top: 80px; }
#app .pearl-page .faq h2 { margin: 15px 0px; font-size: 36px; }
#app .pearl-page .faq > div > p { color: var(--muted); font-size: 13px; }
#app .pearl-page .faq details { border-bottom: 1px solid var(--line); }
#app .pearl-page .faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 0px; cursor: pointer; font-size: 13px; line-height: 1.5; }
#app .pearl-page .faq summary::-webkit-details-marker { display: none; }
#app .pearl-page .faq summary .icon { width: 15px; height: 15px; }
#app .pearl-page .faq details[open] summary .icon { transform: rotate(90deg); }
#app .pearl-page .faq details p { font-size: 12px; line-height: 1.7; color: var(--muted); padding: 0px 24px 22px 0px; }
#app .pearl-page fieldset { border: 0px; padding: 0px; margin: 0px; }
#app .pearl-page legend { font-size: 14px; font-weight: 600; margin-bottom: 14px; }
@media (min-width: 1600px) {
#app .pearl-page .hero { height: min(740px, calc(100svh - 64px)); min-height: 0px; }
#app .pearl-page .hero-art { object-fit: cover; object-position: center 48%; }
#app .pearl-page .hero-inner { width: min(1320px, 100% - 128px); }
}
@media (max-width: 1100px) {
#app .pearl-page .wrap { width: calc(100% - 72px); }
#app .pearl-page .hero-copy { width: 59%; }
#app .pearl-page .hero h1 { font-size: 80px; }
#app .pearl-page .hero-statement { font-size: 30px; }
#app .pearl-page .hero-actions { flex-wrap: wrap; }
#app .pearl-page .hero-art { object-position: 53% center; }
#app .pearl-page .experience-grid { gap: 45px; }
#app .pearl-page .experience-copy h2, #app .pearl-page .section-intro h2 { font-size: 34px; }
#app .pearl-page .plan-card { padding: 23px; }
#app .pearl-page .price .price-amount { font-size: 43px; }
#app .pearl-page .faq { gap: 50px; }
#app .pearl-page .exam-strip .wrap > div { gap: 26px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
#app .pearl-page .plan-grid { grid-template-columns: 1fr; max-width: 540px; }
#app .pearl-page .plan-card { padding: 32px; }
#app .pearl-page .price .price-amount { font-size: 50px; }
}
@media (max-width: 760px) {
#app .pearl-page .wrap { width: calc(100% - 40px); }
#app .pearl-page .site-header { height: 76px; margin-bottom: -76px; padding-top: 12px; }
#app .pearl-page .nav-shell { height: 56px; width: calc(100% - 24px); padding: 0px 10px 0px 16px; }
#app .pearl-page .brand { font-size: 18px; gap: 7px; }
#app .pearl-page .brand img { width: 26px; height: 26px; }
#app .pearl-page .nav-links { display: none; position: absolute; top: 65px; left: 0px; right: 0px; padding: 20px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); gap: 24px; }
#app .pearl-page .nav-links.is-open { display: flex; }
#app .pearl-page .menu-toggle { display: inline-grid; }
#app .pearl-page .nav-right { gap: 5px; }
#app .pearl-page .button.nav-cta { min-height: 33px; padding-inline: 12px; font-size: 10px; }
#app .pearl-page .hero { height: min(650px, -105px + 100svh); min-height: 520px; max-height: none; }
#app .pearl-page .hero-inner { align-items: flex-start; padding-top: 115px; }
#app .pearl-page .hero-copy { width: 100%; padding-bottom: 0px; }
#app .pearl-page .hero-art { width: 100%; height: 310px; top: auto; bottom: 0px; object-fit: cover; object-position: right bottom; mask-image: linear-gradient(transparent 0px, rgb(0, 0, 0) 42px); }
#app .pearl-page .hero { background: rgb(237, 240, 245); }
#app .pearl-page .hero-eyebrow { font-size: 10px; margin-bottom: 12px; }
#app .pearl-page .hero h1 { font-size: 62px; }
#app .pearl-page .hero-statement { font-size: 25px; margin-top: 10px; }
#app .pearl-page .hero-statement { max-width: 315px; }
#app .pearl-page .hero-description { margin-top: 14px; font-size: 12px; max-width: 310px; }
#app .pearl-page .hero-description .desktop-break { display: none; }
#app .pearl-page .hero-actions { gap: 9px; margin-top: 20px; }
#app .pearl-page .hero-actions .button { min-height: 43px; padding-inline: 15px; font-size: 11px; gap: 8px; }
#app .pearl-page .hero-actions .icon { width: 15px; height: 15px; }
#app .pearl-page .hero-note { margin-top: 12px; font-size: 9px; }
#app .pearl-page .hero-caption { display: none; }
#app .pearl-page .exam-strip > .wrap { min-height: 100px; justify-content: center; gap: 15px; flex-direction: column; padding-block: 20px; }
#app .pearl-page .exam-strip > .wrap > span { font-size: 10px; }
#app .pearl-page .exam-strip .wrap > div { width: 100%; justify-content: space-between; gap: 12px; }
#app .pearl-page .exam-strip b { font-size: 17px; }
#app .pearl-page .exam-strip b span { font-size: 10px; }
#app .pearl-page .steps-section { padding-block: 55px; }
#app .pearl-page h2, #app .pearl-page .section-intro h2 { font-size: 32px; }
#app .pearl-page .steps-grid { gap: 22px; margin-top: 30px; grid-template-columns: 1fr; }
#app .pearl-page .steps-grid article { padding-top: 16px; }
#app .pearl-page .steps-grid h3 { margin: 12px 0px 8px; font-size: 20px; }
#app .pearl-page .steps-grid p { font-size: 13px; max-width: 100%; }
#app .pearl-page .experience { padding-block: 52px; }
#app .pearl-page .experience-grid { display: flex; flex-direction: column; gap: 30px; }
#app .pearl-page .experience-copy { width: 100%; }
#app .pearl-page .experience-copy h2 { font-size: 32px; }
#app .pearl-page .experience-copy > p { font-size: 13px; max-width: 360px; }
#app .pearl-page .experience-tabs { margin-top: 24px; grid-template-columns: repeat(3, 1fr); gap: 4px; }
#app .pearl-page .experience-tabs button { display: flex; flex-direction: column; text-align: center; padding: 12px 5px; gap: 9px; font-size: 11px; min-height: 75px; border-bottom: 0px; border-radius: 6px; }
#app .pearl-page .experience-tabs button small, #app .pearl-page .experience-tabs button > svg:last-child { display: none; }
#app .pearl-page .experience-tabs button > span { flex: 0 1 0%; line-height: 1.4; }
#app .pearl-page .sample-panel { padding: 23px; width: 100%; min-height: 425px; }
#app .pearl-page .sample-title { margin-bottom: 25px; }
#app .pearl-page .closing { padding: 55px 0px; }
#app .pearl-page .closing h2 { font-size: 32px; }
#app .pearl-page .closing p { font-size: 13px; }
#app .pearl-page .footer { padding-top: 32px; }
#app .pearl-page .footer-top { flex-wrap: wrap; gap: 20px; padding-bottom: 28px; }
#app .pearl-page .footer-top p { order: 3; flex-basis: 100%; font-size: 11px; }
#app .pearl-page .footer-top .text-link { margin-left: auto; font-size: 11px; }
#app .pearl-page .footer-bottom { flex-wrap: wrap; gap: 18px; font-size: 9px; }
#app .pearl-page .footer-bottom > span:last-child { flex-basis: 100%; }
#app .pearl-page .footer-bottom > div { margin-left: auto; gap: 18px; }
#app .pearl-page .pricing-heading { padding-top: 115px; padding-bottom: 28px; }
#app .pearl-page .pricing-heading h1 { font-size: 42px; }
#app .pearl-page .pricing-heading > p { font-size: 14px; margin-top: 18px; }
#app .pearl-page .access-grid { grid-template-columns: 1fr; gap: 20px; }
#app .pearl-page .access-card { padding: 25px; }
#app .pearl-page .access-card h2 { font-size: 27px; }
#app .pearl-page .access-card .price { margin-block: 22px; }
#app .pearl-page .price b { font-size: 50px; }
#app .pearl-page .pricing-fine { font-size: 10px; text-align: left; }
#app .pearl-page .faq { grid-template-columns: 1fr; gap: 22px; padding-block: 50px; }
#app .pearl-page .faq h2 { font-size: 30px; }
#app .pearl-page .billing-picker { gap: 2px; padding: 4px; width: 100%; max-width: 370px; }
#app .pearl-page .billing-picker label { flex: 1 1 0%; }
#app .pearl-page .billing-picker span { min-width: 0px; padding: 12px 8px; font-size: 11px; }
#app .pearl-page .billing-caption { font-size: 10px; margin-bottom: 25px; }
#app .pearl-page .plan-card .price { margin: 23px 0px 0px; }
#app .pearl-page .plan-card .price-amount { font-size: 48px; }
#app .pearl-page .plan-card .card-note { min-height: 0px; }
#app .pearl-page .reading-invitation { flex-wrap: wrap; gap: 16px; margin-top: 38px; }
#app .pearl-page .reading-invitation > div { min-width: 200px; }
#app .pearl-page .reading-invitation .button { margin-left: 42px; min-height: 42px; }
#app .pearl-page .reading-invitation h2 { font-size: 21px; }
}
@media (max-width: 380px) {
#app .pearl-page .plan-card .price-amount { font-size: 40px; }
#app .pearl-page .hero-statement { font-size: 23px; }
#app .pearl-page .hero-actions .button { padding-inline: 12px; font-size: 10px; }
#app .pearl-page .hero-actions { gap: 6px; }
#app .pearl-page .nav-shell { padding-left: 12px; }
#app .pearl-page .nav-cta .icon { display: none; }
#app .pearl-page .brand { font-size: 17px; }
}
@media (max-width: 760px) and (max-height: 700px) {
#app .pearl-page .hero-inner { padding-top: 100px; }
#app .pearl-page .hero-art { height: 235px; }
#app .pearl-page .hero h1 { font-size: 56px; }
#app .pearl-page .hero-statement { font-size: 22px; }
#app .pearl-page .hero-actions { margin-top: 16px; }
}
@media (min-width: 761px) and (max-height: 700px) {
#app .pearl-page .hero { height: calc(100svh - 56px); min-height: 0; }
#app .pearl-page .hero-inner { padding-top: 96px; }
#app .pearl-page .hero-copy { padding-bottom: 0; }
#app .pearl-page .hero h1 { font-size: 64px; }
#app .pearl-page .hero-eyebrow { font-size: 11px; margin-bottom: 10px; }
#app .pearl-page .hero-statement { font-size: 26px; margin-top: 10px; }
#app .pearl-page .hero-description { font-size: 12px; margin-top: 14px; }
#app .pearl-page .hero-actions { margin-top: 18px; }
#app .pearl-page .hero-actions .button { min-height: 44px; }
#app .pearl-page .hero-note { font-size: 10px; margin-top: 10px; }
#app .pearl-page .hero-caption { display: none; }
#app .pearl-page .hero-art { object-fit: contain; object-position: right center; }
}
@media (min-width: 761px) and (max-height: 560px) {
#app .pearl-page .hero h1 { font-size: 48px; }
#app .pearl-page .hero-eyebrow { font-size: 10px; margin-bottom: 6px; }
#app .pearl-page .hero-statement { font-size: 22px; line-height: 1.1; margin-top: 8px; }
#app .pearl-page .hero-description { font-size: 11px; line-height: 1.5; margin-top: 10px; }
#app .pearl-page .hero-actions { margin-top: 10px; }
#app .pearl-page .hero-actions .button { min-height: 43px; }
#app .pearl-page .hero-note { font-size: 9px; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
#app .pearl-page *, #app .pearl-page ::before, #app .pearl-page ::after { transition: none !important; scroll-behavior: auto !important; }
}