:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; color: #18201f; background: #f7f8f5; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.real-nav { height: 68px; padding: 0 max(24px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d8ddda; background: rgba(247,248,245,.94); }
.real-nav a { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 14px; }
.real-nav a > b { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; background: #0e7c86; border-radius: 4px; font-size: 12px; }
.real-nav > span { padding: 5px 9px; border: 1px solid #bbc5c1; border-radius: 4px; color: #56615d; font-size: 12px; }
.real-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 72px 0 48px; }
.real-intro { max-width: 740px; margin-bottom: 52px; }
.real-intro > span, .public-title > span, .publish-result > div > span { color: #0e7c86; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.real-intro h1 { max-width: 720px; margin: 13px 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(45px, 7vw, 78px); font-weight: 500; line-height: .97; letter-spacing: 0; }
.real-intro p { max-width: 600px; margin: 0; color: #56615d; font-size: 18px; line-height: 1.6; }
.demo-link { display: inline-block; margin-top: 18px; color: #0e7c86; font-size: 13px; font-weight: 800; text-decoration: none; border-bottom: 1px solid #8ab7b3; }
.demo-link:hover { color: #096b73; border-color: #096b73; }
.proof-builder { display: grid; grid-template-columns: minmax(320px, .78fr) minmax(420px, 1.22fr); border: 1px solid #cfd6d3; background: #fff; }
.builder-form { padding: 28px; border-right: 1px solid #cfd6d3; }
.form-step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; margin-bottom: 24px; }
.form-step > span { color: #0e7c86; font-size: 11px; font-weight: 800; padding-top: 4px; }
.form-step label, .rate-form label, .share-fields label { display: grid; gap: 7px; color: #313b38; font-size: 12px; font-weight: 750; }
.file-drop { min-height: 94px; padding: 18px; place-content: center; border: 1px dashed #9faaa6; background: #f7faf8; cursor: pointer; }
.file-drop:hover, .file-drop.has-file { border-color: #0e7c86; background: #edf8f7; }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-drop b { font-size: 14px; }
.file-drop small { color: #78817e; font-weight: 450; }
.builder-form input:not([type=file]), .rate-form input, .rate-form textarea, .share-fields input, .share-fields textarea { width: 100%; border: 1px solid #bdc6c2; border-radius: 3px; padding: 12px 13px; color: #17201e; background: #fff; outline: none; }
.builder-form input:focus, .rate-form input:focus, .rate-form textarea:focus { border-color: #0e7c86; box-shadow: 0 0 0 3px rgba(14,124,134,.12); }
.real-primary { width: 100%; min-height: 49px; border: 0; border-radius: 4px; color: #fff; background: #0e7c86; font-weight: 800; cursor: pointer; }
.real-primary:hover { background: #096b73; }
.real-primary:disabled { opacity: .55; cursor: wait; }
.form-status { min-height: 20px; margin: 12px 0 0; color: #76807c; font-size: 12px; line-height: 1.5; }
.form-status.error { color: #b43a2d; }
.proof-preview { min-width: 0; padding: 28px; background: #ebefec; }
.preview-head { height: 34px; display: flex; justify-content: space-between; color: #62706b; font-size: 12px; text-transform: uppercase; }
.preview-head b { color: #26312e; }
.comparison { --position: 50%; position: relative; aspect-ratio: 16 / 10; min-height: 230px; overflow: hidden; background: #dce2df; touch-action: pan-y; }
.comparison-before, .comparison-after { position: absolute; inset: 0; }
.comparison-after { width: var(--position); overflow: hidden; border-right: 2px solid #fff; }
.comparison img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.comparison-after img { width: calc(100% / (var(--position-num, .5))); min-width: 100%; }
.comparison span { position: absolute; z-index: 2; top: 14px; padding: 6px 9px; color: #fff; background: rgba(20,28,26,.72); border-radius: 3px; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.comparison-before span { right: 14px; }
.comparison-after span { left: 14px; }
.comparison-line { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--position); pointer-events: none; }
.comparison-line b { position: absolute; top: 50%; left: 0; width: 42px; height: 42px; display: grid; place-items: center; transform: translate(-50%,-50%); border: 2px solid #fff; border-radius: 50%; color: #fff; background: #0e7c86; font-style: normal; }
.comparison-range { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.placeholder-comparison:after { content: "Your comparison will appear here"; position: absolute; inset: 0; display: grid; place-items: center; color: #64716c; font-size: 13px; background: repeating-linear-gradient(135deg,#e4e9e6 0,#e4e9e6 12px,#dce2df 12px,#dce2df 24px); }
.placeholder-comparison.ready:after { display: none; }
.publish-result { margin-top: 28px; padding: 28px; display: grid; grid-template-columns: .7fr 1.3fr; gap: 42px; border: 1px solid #90b9b6; background: #edf8f7; }
.publish-result[hidden] { display: none; }
.publish-result h2 { margin: 8px 0 0; font: 500 30px/1.1 Georgia, serif; }
.share-fields { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.share-fields label:last-of-type { grid-column: 1; }
.share-fields button { align-self: end; min-height: 42px; padding: 0 16px; border: 1px solid #759b97; border-radius: 3px; color: #134e52; background: #fff; font-weight: 800; cursor: pointer; }
.real-footer { width: min(1180px, calc(100% - 48px)); min-height: 80px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #d8ddda; color: #68736f; font-size: 13px; }
.public-shell { width: min(980px, calc(100% - 40px)); margin: 0 auto; padding: 62px 0; }
.public-title h1 { margin: 8px 0 28px; font: 500 clamp(36px,6vw,64px)/1.05 Georgia, serif; }
.public-comparison { aspect-ratio: 16 / 10; }
.public-meta { display: flex; justify-content: space-between; padding-top: 14px; color: #67716e; font-size: 12px; }
.embed-body { padding: 0; overflow: hidden; background: #e1e5e3; }
.embed-body .comparison { width: 100vw; height: 100vh; min-height: 0; }
.embed-credit { position: fixed; z-index: 8; right: 8px; bottom: 8px; padding: 5px 7px; border-radius: 3px; color: #fff; background: rgba(16,24,22,.72); font-size: 10px; text-decoration: none; }

.rate-app, .rate-public { color: #271922; background: #fff8f2; }
.rate-app .real-nav, .rate-public .real-nav { border-color: #e7d8d2; background: rgba(255,248,242,.94); }
.rate-app .real-nav a > b, .rate-public .real-nav a > b { background: #c13d73; }
.rate-app .real-intro > span { color: #c13d73; }
.rate-shell { padding-top: 58px; }
.rate-shell .real-intro { margin-bottom: 38px; }
.rate-shell .real-intro h1 { max-width: 820px; font-family: Inter, sans-serif; font-size: clamp(42px,6vw,70px); font-weight: 850; line-height: .98; }
.rate-builder { display: grid; grid-template-columns: minmax(350px,.95fr) minmax(360px,1.05fr); gap: 40px; align-items: start; }
.rate-form { padding: 28px; border: 1px solid #dfcec7; background: #fff; }
.rate-form > label, .rate-form .field-row, .packages-title, .package-input { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rate-form textarea { resize: vertical; }
.packages-title { display: flex; align-items: end; justify-content: space-between; padding-top: 8px; }
.packages-title span { font-weight: 850; }
.packages-title small { color: #8b777f; }
.package-input { display: grid; grid-template-columns: 1fr 88px; gap: 8px; }
.rate-app .real-primary { background: #c13d73; }
.rate-app .real-primary:hover { background: #a92f63; }
.rate-app .rate-form input:focus, .rate-app .rate-form textarea:focus { border-color: #c13d73; box-shadow: 0 0 0 3px rgba(193,61,115,.12); }
.rate-live, .public-rate-card { padding: 38px; border: 1px solid #dfcec7; background: #fff; box-shadow: 14px 14px 0 #f1c24f; }
.rate-profile { display: flex; align-items: center; gap: 12px; }
.rate-profile i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #c13d73; font-style: normal; font-size: 13px; font-weight: 850; }
.rate-profile div { display: grid; gap: 3px; }
.rate-profile small { color: #9c7182; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.rate-profile strong { font-size: 14px; }
.rate-live h2, .public-rate-card h1 { margin: 44px 0 10px; font-size: 34px; letter-spacing: 0; }
.rate-live > p, .public-rate-card > p { min-height: 46px; margin: 0 0 30px; color: #745e67; line-height: 1.55; }
#live-packages, .public-packages { border-top: 1px solid #eaded9; }
#live-packages > div, .public-packages > div { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; min-height: 66px; border-bottom: 1px solid #eaded9; }
#live-packages span, .public-packages span { color: #c13d73; font-size: 10px; font-weight: 850; }
#live-packages b, .public-packages b { font-size: 14px; }
#live-packages strong, .public-packages strong { font-size: 15px; }
.rate-live > a, .contact-creator { margin-top: 24px; min-height: 48px; display: grid; place-items: center; border-radius: 3px; color: #fff; background: #271922; font-size: 13px; font-weight: 850; text-decoration: none; }
.rate-published { border-color: #d9afbf; background: #fff0f5; }
.rate-published > div > span { color: #c13d73; }
.rate-public-shell { width: min(650px, calc(100% - 40px)); margin: 0 auto; padding: 70px 0 96px; }
.public-rate-card { padding: clamp(28px,6vw,54px); box-shadow: 18px 18px 0 #f1c24f; }
.public-rate-card h1 { margin-top: 52px; font-size: clamp(38px,8vw,60px); line-height: 1; }
.public-rate-card footer { display: flex; justify-content: space-between; margin-top: 30px; color: #927e85; font-size: 11px; }

@media (max-width: 800px) {
  .real-shell { width: min(100% - 28px, 620px); padding-top: 46px; }
  .real-intro { margin-bottom: 34px; }
  .real-intro h1 { font-size: 46px; }
  .proof-builder, .rate-builder { grid-template-columns: 1fr; }
  .builder-form { border-right: 0; border-bottom: 1px solid #cfd6d3; }
  .proof-preview { padding: 18px; }
  .comparison { min-height: 200px; }
  .publish-result { grid-template-columns: 1fr; gap: 22px; }
  .rate-builder { gap: 22px; }
  .rate-live { box-shadow: 8px 8px 0 #f1c24f; }
}
@media (max-width: 500px) {
  .real-nav { height: 60px; padding: 0 14px; }
  .real-shell { width: calc(100% - 20px); }
  .real-intro h1 { font-size: 39px; }
  .real-intro p { font-size: 16px; }
  .builder-form, .rate-form, .rate-live { padding: 20px; }
  .form-step { grid-template-columns: 26px 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .publish-result { padding: 20px; }
  .share-fields { grid-template-columns: 1fr; }
  .share-fields button, .share-fields label:last-of-type { grid-column: 1; }
  .public-meta, .public-rate-card footer { gap: 12px; flex-direction: column; }
  .public-shell { width: calc(100% - 20px); padding-top: 42px; }
  .public-comparison { min-height: 220px; }
  .package-input { grid-template-columns: 1fr 78px; }
  .rate-public-shell { width: calc(100% - 36px); padding-top: 42px; }
  .public-rate-card { box-shadow: 10px 10px 0 #f1c24f; }
}