:root { --ink: #173b37; --muted: #60716e; --paper: #f5f3ed; --card: #fffdf8; --mint: #cce8dc; --yellow: #f4d35e; --line: #d8ded8; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Georgia, "Times New Roman", serif; color: var(--ink); background: var(--paper); }
a { color: inherit; }
.home-shell, .login-shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.home-nav { display: flex; justify-content: space-between; align-items: center; padding: 28px 0; }
.home-nav-links, .pricing-nav-links { display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 20px; font-weight: 700; }
.brand img { width: 32px; height: 32px; object-fit: contain; }
.text-link { font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.home-hero { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(44px, 8vw, 110px); align-items: center; min-height: calc(100vh - 155px); padding: 48px 0 80px; }
.eyebrow { margin: 0 0 18px; color: #4f8877; font: 700 12px Arial, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(48px, 6vw, 82px); line-height: .98; letter-spacing: -1px; font-weight: 500; }
.hero-description { max-width: 470px; margin: 28px 0; color: var(--muted); font: 18px/1.55 Arial, sans-serif; }
.hero-button { display: inline-flex; gap: 18px; align-items: center; padding: 15px 20px; background: var(--yellow); border-radius: 4px; font: 700 14px Arial, sans-serif; text-decoration: none; }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.hero-secondary-link { color: var(--ink); font: 700 14px Arial, sans-serif; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.hero-preview { padding: 24px; background: var(--mint); border: 1px solid #b8d7c9; box-shadow: 20px 20px 0 rgba(23, 59, 55, .08); transform: rotate(1.5deg); }
.preview-topline { display: flex; gap: 6px; padding-bottom: 36px; border-bottom: 1px solid rgba(23,59,55,.16); }.preview-topline span { width: 8px; height: 8px; border-radius: 50%; background: #7ab29c; }
.preview-heading { padding: 28px 0 24px; font-size: clamp(24px, 3vw, 38px); line-height: 1.05; }
.preview-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; }.preview-panel { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: rgba(255,253,248,.72); min-height: 210px; }.preview-panel small { font: 700 10px Arial, sans-serif; letter-spacing: 1px; color: #5c8374; }.preview-panel strong { font-size: 17px; font-weight: 500; }.preview-panel i { display: block; height: 1px; margin: 4px 0; background: var(--line); }.preview-panel b { margin-top: 10px; font-size: 34px; font-weight: 500; }.preview-panel span { color: var(--muted); font: 12px Arial, sans-serif; }
.home-footer { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); color: var(--muted); font: 12px Arial, sans-serif; }
.login-page { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 15% 15%, #e2f0e7, transparent 35%), var(--paper); }.login-shell { width: min(480px, calc(100% - 40px)); }.login-brand { display: flex; justify-content: center; margin-bottom: 28px; }.login-panel { padding: clamp(28px, 6vw, 52px); background: var(--card); border: 1px solid var(--line); box-shadow: 12px 12px 0 rgba(23,59,55,.07); }.login-intro h1 { font-size: clamp(38px, 8vw, 58px); }.login-intro > p:last-child { margin: 20px 0 30px; color: var(--muted); font: 15px/1.5 Arial, sans-serif; }.provider-list { display: grid; gap: 11px; }.provider-button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1px solid var(--line); background: white; color: var(--ink); cursor: pointer; font: 700 14px Arial, sans-serif; text-align: left; }.provider-button:hover { background: #f3f8f3; border-color: #8fb8a6; }.provider-button:disabled { cursor: wait; opacity: .6; }.provider-mark { display: grid; place-items: center; width: 22px; height: 22px; font: 700 18px Arial, sans-serif; }.google-mark { color: #4285f4; }.microsoft-mark { color: #f25022; }.login-note { margin: 24px 0 0; color: var(--muted); font: 11px/1.5 Arial, sans-serif; text-align: center; }.auth-error { margin: -12px 0 18px; padding: 10px 12px; color: #9b3434; background: #fff0ed; border: 1px solid #efc5bd; font: 13px/1.4 Arial, sans-serif; }
.pricing-page { background: var(--paper); }
.pricing-shell { width: min(1080px, calc(100% - 48px)); margin: 0 auto; }
.pricing-intro { max-width: 710px; padding: 66px 0 44px; }
.pricing-intro h1 { font-size: clamp(44px, 6vw, 76px); }
.pricing-intro h1 em { color: #4f8877; font-style: normal; }
.pricing-intro > p:last-child { max-width: 510px; margin: 26px 0 0; color: var(--muted); font: 17px/1.55 Arial, sans-serif; }
.pricing-grid { display: grid; grid-template-columns: .9fr 1.16fr .9fr; gap: 22px; align-items: stretch; }
.pricing-card { position: relative; display: flex; flex-direction: column; padding: clamp(24px, 3vw, 34px); background: var(--card); border: 1px solid var(--line); box-shadow: 8px 8px 0 rgba(23,59,55,.05); }
.pricing-card-premium { background: var(--mint); color: var(--ink); border-color: #a8cdbc; box-shadow: 12px 16px 0 rgba(23,59,55,.11); }
.pricing-card-pro { border-color: #9db8ab; }
.pricing-card-premium { transform: translateY(-10px); box-shadow: 12px 18px 0 rgba(23,59,55,.18); }
.premium-ribbon { position: absolute; top: 0; right: 0; padding: 9px 14px; background: var(--yellow); color: var(--ink); font: 700 10px Arial, sans-serif; letter-spacing: .7px; text-transform: uppercase; }
.pricing-card-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.pricing-card-premium .pricing-card-heading { border-color: rgba(23,59,55,.16); }
.plan-kicker, .feature-list-heading { margin: 0 0 9px; color: #4f8877; font: 700 11px Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.pricing-card-premium .plan-kicker { color: #245e50; }
.pricing-card h2 { margin: 0; font-size: clamp(34px, 4vw, 48px); font-weight: 500; }
.plan-price { display: flex; flex-direction: column; align-items: flex-end; margin: 0; }
.plan-price strong { font-size: 28px; font-weight: 500; }
.plan-price span { color: var(--muted); font: 11px Arial, sans-serif; }
.pricing-card-premium .plan-price span { color: #3f5d56; }
.plan-description { min-height: 72px; margin: 20px 0; color: var(--muted); font: 15px/1.5 Arial, sans-serif; }
.pricing-card-premium .plan-description { color: #3f5d56; }
.plan-value { display: grid; gap: 5px; min-height: 54px; margin: 20px 0 0; color: var(--muted); font: 12px/1.4 Arial, sans-serif; }
.plan-value strong { color: var(--ink); font-size: 13px; }
.pricing-card-premium .plan-value { color: #3f5d56; }
.pricing-card-premium .plan-value strong { color: var(--ink); }
.plan-button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px 17px; border: 1px solid var(--ink); border-radius: 4px; cursor: pointer; font: 700 14px Arial, sans-serif; text-decoration: none; }
.plan-button-light { background: transparent; color: var(--ink); }
.plan-button-light:hover { background: var(--mint); }
.plan-button-premium { background: var(--yellow); color: var(--ink); }
.plan-button-premium:hover { background: #f8df76; }
.checkout-note { min-height: 16px; margin: 10px 0 0; color: #b8cbc2; font: 11px Arial, sans-serif; }
.plan-button:disabled { cursor: wait; opacity: .65; }
.feature-list-heading { margin-top: 30px; color: var(--ink); }
.pricing-card-premium .feature-list-heading { color: var(--ink); }
.feature-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font: 14px/1.4 Arial, sans-serif; }
.feature-list li { position: relative; padding-left: 24px; }
.feature-list li::before { position: absolute; left: 0; color: #4f8877; content: "✓"; font-weight: 700; }
.pricing-card-premium .feature-list li::before { color: #245e50; }
.feature-highlight { font-weight: 700; }
.pricing-footer { margin-top: 64px; }
@media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr; max-width: 650px; }.pricing-card-premium { transform: none; } }
@media (max-width: 760px) { .home-hero { grid-template-columns: 1fr; padding-top: 25px; }.hero-preview { transform: none; }.home-footer { flex-direction: column; }.pricing-intro { padding-top: 42px; }.pricing-footer { margin-top: 42px; } }
@media (max-width: 480px) { .home-shell, .login-shell, .pricing-shell { width: min(100% - 32px, 1160px); }.home-nav-links, .pricing-nav-links { gap: 14px; }.preview-grid { grid-template-columns: 1fr; }.home-hero h1 { font-size: 48px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }.pricing-card-heading { flex-direction: column; }.plan-price { align-items: flex-start; }.pricing-intro h1 { font-size: 44px; } }