@font-face { font-family: Inter; src: url("/static/fonts/inter/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url("/static/fonts/inter/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Inter; src: url("/static/fonts/inter/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #202124; background: #e9e8e4; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #5577d7; outline-offset: 3px; }
.container { width: min(1100px, calc(100% - 48px)); margin-inline: auto; }
.site-header { background: #efeeeb; border-bottom: 1px solid #d9d8d4; }
.nav-wrap { min-height: 70px; display: flex; align-items: center; gap: 42px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; letter-spacing: -.04em; white-space: nowrap; }
.brand-mark { display: flex; align-items: center; gap: 2px; height: 23px; }
.brand-mark i { width: 3px; height: 13px; background: #222; border-radius: 2px; transform: rotate(-25deg); }
.brand-mark i:nth-child(2) { height: 20px; }.brand-mark i:nth-child(3) { height: 16px; }.brand-mark i:nth-child(4) { height: 10px; }
.brand-accent { color: #202124; }.brand-light { color: #65666a; font-weight: 400; }
.nav-links { display: flex; gap: 30px; margin-left: auto; color: #66686c; font-size: 13px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: #315cc0; }
.nav-action { display: inline-flex; align-items: center; gap: 13px; padding: 9px 13px; border: 1px solid #dadbdc; border-radius: 6px; font-size: 12px; font-weight: 500; }
.nav-action:hover { border-color: #8d9ac2; background: #f8f9fc; }.nav-action span { font-size: 15px; }
.auth-placeholder { width: 110px; height: 34px; flex: none; border: 1px solid #dfded9; border-radius: 6px; background: #e7e6e2; }
@media (max-width: 680px) { .auth-placeholder { margin-left: auto; } }
.account-email { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #62656a; font-size: 12px; }.logout-button { color: #202124; background: transparent; cursor: pointer; }
.pricing-hero { padding-top: 76px; padding-bottom: 57px; text-align: center; }
.eyebrow, .section-label { margin: 0; color: #315cc0; font-size: 11px; font-weight: 600; letter-spacing: .1em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 15px 0 13px; font-size: clamp(34px, 4.7vw, 52px); line-height: 1.2; letter-spacing: -.06em; font-weight: 600; }
.hero-copy { margin-bottom: 15px; color: #696c72; font-size: 14px; line-height: 1.75; }
.preview-note { display: inline-block; margin: 0; padding: 7px 11px; border: 1px solid #d8d8d3; border-radius: 5px; color: #6b6e73; background: #e4e3de; font-size: 11px; }
.balance-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(100%, 760px); margin: 27px auto 0; padding: 17px 20px; border: 1px solid #d2d3cf; border-radius: 8px; background: #f3f2ee; text-align: left; }
.balance-panel > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 15px; }.balance-label { color: #72757a; font-size: 11px; }.balance-panel strong { font-size: 18px; font-weight: 600; }.balance-expiry { flex-basis: 100%; color: #7b7e82; font-size: 11px; }.balance-panel button { flex: none; padding: 9px 12px; border: 1px solid #ccd1d8; border-radius: 5px; color: #315cc0; background: #eef0f2; font-size: 11px; font-weight: 600; cursor: pointer; }.balance-panel button:hover { background: #e5eaf2; }
.checkout-message { width: min(100%, 760px); margin: 12px auto 0; color: #315cc0; font-size: 12px; line-height: 1.6; }.checkout-message.is-error { color: #a33737; }
.subscriptions { padding-bottom: 88px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; max-width: 760px; margin: 0 auto 28px; }
h2 { margin: 11px 0 0; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.05em; font-weight: 600; }
.plan-grid { max-width: 760px; margin-inline: auto; }
.plan-card { position: relative; display: grid; grid-template-columns: 1fr .85fr; gap: 28px; min-height: 430px; padding: 31px; border: 1px solid #d6d6d1; border-radius: 11px; background: #f5f4f0; }
.plan-index { color: #7a7d82; font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.plan-head h3 { margin: 17px 0 7px; font-size: 25px; letter-spacing: -.05em; }
.plan-head p { min-height: 40px; margin-bottom: 24px; color: #777a80; font-size: 12px; line-height: 1.7; }
.price-row { display: flex; align-items: baseline; gap: 2px; min-height: 55px; }
.currency { align-self: flex-start; margin-top: 7px; font-size: 26px; font-weight: 600; letter-spacing: -.06em; }
.price-row strong { font-size: 48px; line-height: 1; letter-spacing: -.08em; font-weight: 600; }
.period { margin-left: 6px; color: #777a80; font-size: 12px; }
.billing-detail { min-height: 32px; margin: 9px 0 20px; color: #73767b; font-size: 11px; line-height: 1.5; }
.plan-button { width: 100%; min-height: 47px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 15px; border: 1px solid #315cc0; border-radius: 6px; color: #fff; background: #315cc0; font-size: 12px; font-weight: 600; cursor: pointer; }
.plan-button:hover { background: #254da9; }.plan-button:disabled { opacity: .6; cursor: wait; }
.plan-button-featured { border-color: #b3c1e3; color: #315cc0; background: #e4e9f4; }.plan-button-featured:hover { background: #d9e1f1; }
.plan-button span { font-size: 16px; }
.card-features { align-self: start; padding-top: 29px; }
.feature-heading { margin-bottom: 17px; font-size: 11px; font-weight: 600; line-height: 1.5; }
.card-features ul, .one-time-copy ul { margin: 0; padding: 0; list-style: none; }
.card-features li, .one-time-copy li { position: relative; padding-left: 24px; margin-bottom: 16px; color: #56595f; font-size: 12px; line-height: 1.5; }
.card-features li strong { color: #202124; font-weight: 600; }
.card-features li::before, .one-time-copy li::before { content: "✓"; position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; color: #fff; background: #315cc0; font-size: 10px; font-weight: 600; }
.plan-footnote { margin: 19px 0 0; color: #7b7e83; text-align: center; font-size: 11px; line-height: 1.7; }
.one-time-section { padding: 64px 0; border-top: 1px solid #d4d3ce; border-bottom: 1px solid #d4d3ce; background: #dfded9; }
.one-time-layout { display: grid; grid-template-columns: 1fr 335px; align-items: center; gap: 60px; }
.one-time-copy h2 { max-width: 500px; margin: 14px 0 13px; }
.one-time-copy > p:not(.section-label) { max-width: 480px; margin-bottom: 25px; color: #707379; font-size: 13px; line-height: 1.8; }
.one-time-copy ul { display: flex; flex-wrap: wrap; gap: 8px 21px; }.one-time-copy li { margin: 0; }
.one-time-card { padding: 25px; border: 1px solid #c8c9c6; border-radius: 10px; background: #f3f2ee; }
.one-time-price { display: flex; align-items: baseline; margin-top: 18px; }.one-time-price > span:first-child { align-self: flex-start; margin-top: 6px; font-size: 26px; font-weight: 600; }.one-time-price strong { font-size: 50px; line-height: 1; letter-spacing: -.08em; }.one-time-price > span:last-child { margin-left: 8px; color: #7a7d82; font-size: 12px; }
.one-time-card p { margin: 12px 0 22px; color: #6f7277; font-size: 12px; }.one-time-card small { display: block; margin-top: 13px; color: #83858a; font-size: 10px; }
.pricing-note { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-top: 37px; padding-bottom: 37px; }
.pricing-note > div { display: flex; align-items: center; gap: 12px; }.note-symbol { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border: 1px solid #9299a9; border-radius: 50%; color: #606b80; font-size: 12px; font-weight: 600; }.pricing-note p { margin: 0; color: #73767b; font-size: 11px; line-height: 1.7; }
.pricing-note > a { flex: none; color: #315cc0; font-size: 12px; font-weight: 600; }.pricing-note > a:hover { text-decoration: underline; }
.site-footer { border-top: 1px solid #d4d3ce; background: #dfded9; }.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; color: #6b6e73; font-size: 11px; }.footer-inner nav { display: flex; gap: 20px; }.footer-inner a:hover { color: #315cc0; }
@media (max-width: 1000px) { .one-time-layout { gap: 35px; } }
@media (max-width: 680px) { .container { width: min(100% - 36px, 1100px); }.nav-wrap { gap: 15px; }.nav-links, .account-email { display: none; }.nav-action { margin-left: auto; }.pricing-hero { padding-top: 56px; padding-bottom: 48px; }.balance-panel { align-items: flex-start; flex-direction: column; }.section-heading { display: block; }.plan-card { grid-template-columns: 1fr; gap: 8px; min-height: auto; padding: 26px; }.card-features { padding-top: 4px; }.plan-head p { min-height: 0; }.subscriptions { padding-bottom: 64px; }.one-time-layout { grid-template-columns: 1fr; }.one-time-section { padding: 56px 0; }.pricing-note { align-items: flex-start; flex-direction: column; } }
@media (max-width: 400px) { .brand { font-size: 14px; }.nav-action { padding: 8px 9px; font-size: 11px; } }