:root {
  --navy: #101828;
  --ink: #172033;
  --muted: #667085;
  --line: #e7eaf0;
  --surface: #ffffff;
  --soft: #f5f7fb;
  --accent: #5b5ce2;
  --accent-soft: #eeefff;
  --green: #16a36a;
  --shadow: 0 18px 50px rgba(16, 24, 40, .09);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #f1f4f8; font-family: "DM Sans", system-ui, sans-serif; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 10%, #dfe2ff, transparent 40%), #f6f7fb; }
.login-card { width: min(430px, 100%); background: var(--surface); padding: 38px; border-radius: 28px; box-shadow: var(--shadow); }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-family: Manrope, sans-serif; }
.brand-mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: white; background: linear-gradient(135deg, #6c6de9, #8d7fea); font-size: 19px; }
.login h1 { font: 800 30px Manrope, sans-serif; margin: 40px 0 8px; letter-spacing: -.04em; }
.login p { color: var(--muted); margin: 0 0 28px; line-height: 1.55; }
label { display: grid; gap: 8px; font-size: 13px; font-weight: 700; color: #475467; margin-bottom: 16px; }
input, textarea { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--ink); background: white; outline: none; }
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.primary { border: 0; border-radius: 12px; background: var(--accent); color: white; padding: 13px 18px; font-weight: 700; }
.primary:hover { filter: brightness(.96); }
.error { color: #c43255; background: #fff1f3; border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; font-size: 13px; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(390px, 430px) 1fr; }
.sidebar { background: var(--navy); color: white; padding: 24px 16px; display: flex; flex-direction: column; gap: 28px; }
.sidebar .brand { color: white; padding: 0 10px; }
.sidebar .brand-mark { background: linear-gradient(135deg, #7779ff, #9990ff); }
.compose { width: 100%; background: #7778ed; border: 0; color: white; border-radius: 13px; padding: 13px; font-weight: 700; text-align: left; }
.folders { display: grid; gap: 5px; }
.folder { border: 0; background: transparent; color: #aab4c8; text-align: left; border-radius: 10px; padding: 11px 12px; display: flex; justify-content: space-between; }
.folder:hover, .folder.active { background: #202a3e; color: white; }
.folder-count { color: #9ea8ff; font-weight: 700; }
.account { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; color: #c9d0dd; font-size: 12px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #dce0ff; color: #4e50ae; font-weight: 800; }
.account button { margin-left: auto; border: 0; background: transparent; color: #aab4c8; }
.list-panel { background: white; border-right: 1px solid var(--line); min-width: 0; }
.list-top { padding: 24px 20px 14px; border-bottom: 1px solid var(--line); }
.list-heading { display: flex; justify-content: space-between; align-items: center; }
.list-heading h2 { margin: 0 0 18px; font: 800 24px Manrope, sans-serif; letter-spacing: -.04em; }
.search { position: relative; }
.search input { width: 100%; padding-left: 38px; background: var(--soft); border-color: transparent; }
.search span { position: absolute; left: 13px; top: 11px; color: #98a2b3; }
.mail-list { overflow: auto; max-height: calc(100vh - 150px); }
.mail-row { padding: 16px 20px; border-bottom: 1px solid #f0f1f5; display: grid; gap: 5px; cursor: pointer; }
.mail-row:hover, .mail-row.selected { background: #fafaff; }
.mail-row.unread { background: #f7f8ff; }
.mail-row.unread .subject, .mail-row.unread .sender { font-weight: 800; }
.mail-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
.sender { font-size: 14px; }
.subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; }
.star { border: 0; background: transparent; color: #b5bdca; padding: 0; }
.star.on { color: #f5b833; }
.empty { padding: 50px 24px; text-align: center; color: var(--muted); }
.reader { background: white; min-width: 0; }
.reader-empty { height: 100%; display: grid; place-items: center; color: var(--muted); padding: 30px; text-align: center; }
.reader-content { height: 100vh; overflow: auto; }
.reader-head { padding: 30px 38px 20px; border-bottom: 1px solid var(--line); }
.reader-actions { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.actions-left, .actions-right { display: flex; gap: 8px; }
.icon-button { border: 1px solid var(--line); background: white; color: #475467; border-radius: 10px; padding: 9px 11px; }
.icon-button:hover { background: var(--soft); }
.reader-head h1 { font: 800 27px Manrope, sans-serif; letter-spacing: -.04em; margin: 0 0 18px; }
.from-line { display: flex; gap: 12px; align-items: center; }
.from-line strong { font-size: 14px; }
.from-line small { display: block; color: var(--muted); margin-top: 3px; }
.reader-body { padding: 28px 38px 60px; line-height: 1.65; max-width: 900px; }
.reader-body img { max-width: 100%; }
.attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.attachment { border: 1px solid var(--line); padding: 9px 12px; border-radius: 10px; color: var(--accent); text-decoration: none; font-size: 13px; }
.modal-wrap { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); display: grid; place-items: center; padding: 18px; z-index: 5; }
.compose-modal { width: min(720px, 100%); background: white; border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.compose-title { padding: 16px 20px; background: var(--navy); color: white; display: flex; justify-content: space-between; font-weight: 700; }
.compose-title button { color: white; background: transparent; border: 0; font-size: 20px; }
.compose-form { padding: 18px 20px; display: grid; gap: 10px; }
.compose-form label { margin: 0; grid-template-columns: 48px 1fr; align-items: center; font-weight: 600; }
.compose-form label span { color: var(--muted); }
.compose-form textarea { min-height: 240px; resize: vertical; }
.compose-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.file-label { color: var(--accent); font-size: 13px; font-weight: 700; cursor: pointer; }
.file-label input { display: none; }
.file-list { color: var(--muted); font-size: 12px; flex: 1; }
.toast { position: fixed; right: 22px; bottom: 22px; padding: 12px 16px; border-radius: 11px; background: var(--navy); color: white; box-shadow: var(--shadow); z-index: 10; }
.toast-error { background: #b4233d; }
.nav-separator { height: 1px; background: #293449; margin: 12px 10px; }
.quote-nav-badge { min-width: 20px; color: #07131f; background: #57e0bd; border-radius: 20px; text-align: center; font-size: 11px; }
.offer-from-mail { border: 0; border-radius: 10px; padding: 9px 12px; color: #0d624f; background: #ddfbf3; font-weight: 700; }

/* Sales dashboard */
.quote-shell { min-height: 100vh; display: grid; grid-template-columns: 248px 1fr; }
.quotes-main { min-width: 0; padding: 42px clamp(24px, 4vw, 64px) 80px; background: #f3f6f8; overflow: auto; max-height: 100vh; }
.quotes-loading { padding: 80px; text-align: center; color: var(--muted); }
.quotes-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 32px; }
.quotes-header h1 { margin: 5px 0 8px; font: 800 40px Manrope, sans-serif; letter-spacing: -.05em; }
.quotes-header p { margin: 0; color: var(--muted); }
.eyebrow { color: #16816a; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 800; }
.new-quote, .send-quote { border: 0; border-radius: 13px; padding: 13px 18px; background: linear-gradient(135deg, #2dd4aa, #5b72ea); color: white; font-weight: 800; box-shadow: 0 10px 26px rgba(45, 180, 167, .2); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.metric-grid article { background: white; border: 1px solid #e9edf2; border-radius: 17px; padding: 20px; box-shadow: 0 8px 26px rgba(16, 24, 40, .035); display: grid; gap: 5px; }
.metric-grid article > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.metric-grid strong { font: 800 23px Manrope, sans-serif; letter-spacing: -.04em; }
.metric-grid small { color: #98a2b3; font-size: 11px; }
.metric-grid .attention { border-color: #8ce7d0; background: #f0fcf8; }
.quote-list-card { background: white; border: 1px solid #e9edf2; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 32px rgba(16, 24, 40, .04); }
.quote-list-head { padding: 22px 24px; border-bottom: 1px solid #edf0f4; display: flex; justify-content: space-between; align-items: center; }
.quote-list-head h2 { margin: 0; font: 800 19px Manrope, sans-serif; }
.quote-list-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.pipeline-legend { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 7px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #5b72ea; margin-left: 8px; }
.dot.accepted { background: #22b88a; }
.quote-table { display: grid; }
.quote-row { width: 100%; display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(130px, .7fr) minmax(170px, .8fr) minmax(210px, 1fr) 26px; align-items: center; gap: 16px; padding: 16px 22px; border: 0; border-bottom: 1px solid #f0f2f5; background: white; text-align: left; color: var(--ink); }
.quote-row:last-child { border-bottom: 0; }
.quote-row:hover { background: #fafcfb; }
.quote-row > div:not(.quote-company) { display: grid; gap: 4px; }
.quote-row small { color: var(--muted); font-size: 11px; font-weight: 500; }
.quote-company { display: flex; align-items: center; gap: 12px; min-width: 0; }
.quote-company > div { display: grid; gap: 3px; min-width: 0; }
.quote-company strong, .quote-company small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #0b6f59; background: #dff8f1; font-weight: 800; flex: 0 0 auto; }
.package-pill { color: #3f4eb4; background: #eef0ff; border-radius: 8px; padding: 4px 8px; font-size: 11px; font-weight: 800; width: fit-content; }
.status { width: fit-content; padding: 4px 9px; border-radius: 20px; font-size: 11px; font-weight: 800; color: #596579; background: #eef1f5; }
.status.sent { color: #3449bb; background: #edf0ff; }.status.viewed { color: #9a5e0a; background: #fff4d9; }.status.callback { color: #a83b68; background: #fff0f6; }.status.accepted { color: #087255; background: #daf8ee; }.status.expired, .status.lost { color: #a8334d; background: #fff0f2; }
.row-arrow { color: #98a2b3; font-size: 18px; }
.quote-empty { padding: 70px 24px; text-align: center; }
.quote-empty > div { font-size: 38px; color: #4acfac; }.quote-empty h3 { margin: 12px 0 7px; font: 800 20px Manrope, sans-serif; }.quote-empty p { color: var(--muted); max-width: 460px; margin: 0 auto 22px; }

/* Quote editor */
.quote-editor-wrap { position: fixed; inset: 0; z-index: 20; background: #eef2f5; overflow: auto; }
.quote-editor { min-height: 100vh; }
.editor-top { height: 76px; padding: 0 28px; display: flex; align-items: center; gap: 16px; background: white; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 3; }
.editor-top > div:nth-child(2) { display: grid; gap: 3px; }
.editor-top > div > span { font-weight: 800; }.editor-top > div > small { color: var(--muted); font-size: 11px; }
.editor-close { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 11px; background: white; font-size: 19px; }
.editor-actions { margin-left: auto; display: flex; gap: 9px; }
.secondary { border: 1px solid var(--line); border-radius: 12px; background: white; color: #344054; padding: 12px 17px; font-weight: 700; }
.editor-body { display: grid; grid-template-columns: minmax(540px, 1fr) minmax(390px, .72fr); align-items: start; }
.quote-form { padding: 36px clamp(24px, 4vw, 56px) 90px; }
.quote-form > section { position: relative; padding: 0 0 44px 56px; border-bottom: 1px solid #dde3e9; margin-bottom: 38px; }
.section-number { position: absolute; left: 0; top: 2px; width: 38px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: #dff8f1; color: #11745e; font-size: 11px; font-weight: 800; }
.section-title { margin-bottom: 23px; }.section-title h2 { margin: 0 0 5px; font: 800 23px Manrope, sans-serif; letter-spacing: -.04em; }.section-title p { margin: 0; color: var(--muted); font-size: 13px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }.form-grid .wide { grid-column: 1 / -1; }
.form-grid label small { font-size: 10px; color: #98a2b3; font-weight: 500; }.form-grid textarea { resize: vertical; }
.package-select { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-bottom: 24px; }
.package-option { position: relative; margin: 0; padding: 17px; display: grid; gap: 8px; border: 1px solid #dfe4ea; border-radius: 16px; background: white; cursor: pointer; }
.package-option input { position: absolute; opacity: 0; }.package-option.selected { border-color: #36c9a4; box-shadow: 0 0 0 3px #dff8f1; }.package-option .recommend { color: #16816a; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }.package-option > strong { font: 800 18px Manrope, sans-serif; }.package-option b { font-size: 14px; }.package-option b small { font-size: 9px; color: var(--muted); }.package-option p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.pricing-inputs { margin-top: 8px; }
.extras-block { background: white; border: 1px solid #e1e6eb; border-radius: 16px; padding: 17px; }
.extras-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }.extras-head > div { display: grid; gap: 2px; }.extras-head small { color: var(--muted); font-size: 10px; }.text-button { border: 0; background: transparent; color: #16816a; font-weight: 800; font-size: 12px; }
.extra-row { display: grid; grid-template-columns: 1fr 150px 34px; gap: 8px; margin-top: 8px; }.extra-row input { padding: 9px 11px; }.extra-row button { border: 0; border-radius: 9px; background: #fff0f2; color: #b4233d; }
.quote-live-preview { position: sticky; top: 76px; height: calc(100vh - 76px); overflow: auto; padding: 32px; background: #07131f; color: white; }
.preview-label { color: #7f92a6; text-transform: uppercase; letter-spacing: .15em; font-size: 9px; margin-bottom: 22px; }
.mini-offer { position: relative; padding: 28px; border: 1px solid #1e3545; border-radius: 20px; background: radial-gradient(circle at 80% 0%, rgba(47, 218, 174, .13), transparent 34%), #0a1926; overflow: hidden; }
.mini-eyebrow { color: #52dfba; font-size: 9px; text-transform: uppercase; letter-spacing: .15em; font-weight: 800; }.mini-offer h2 { margin: 16px 0 13px; font: 800 29px/1.15 Manrope, sans-serif; letter-spacing: -.055em; }.mini-offer h2 em { color: #55dfbd; font-style: normal; }.mini-offer > p { color: #95a7b7; line-height: 1.6; font-size: 12px; }
.mini-package { margin-top: 24px; padding: 20px; border-radius: 16px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); display: grid; gap: 8px; }.mini-package > span { color: #52dfba; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }.mini-package > strong { font: 800 23px Manrope, sans-serif; }.mini-package > b { font-size: 17px; }.mini-package b small { font-size: 10px; color: #8da0b1; }.mini-package ul { padding: 10px 0 0; margin: 0; list-style: none; display: grid; gap: 8px; font-size: 10px; color: #bbc7d0; }.mini-package li::before { content: "✓"; color: #52dfba; margin-right: 7px; }
.mini-total { margin-top: 14px; display: flex; justify-content: space-between; padding: 16px 4px 0; font-size: 11px; color: #8da0b1; }.mini-total strong { color: white; font-size: 15px; }

/* Public proposal */
.public-offer-body { background: #07131f; }
.public-loading, .public-error { min-height: 100vh; display: grid; place-content: center; text-align: center; gap: 14px; background: #07131f; color: white; }.public-error p { color: #91a5b4; }
.public-offer { min-height: 100vh; background: #f5f8f8; color: #10212b; }
.offer-nav { height: 76px; padding: 0 max(24px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; background: #07131f; color: #7f94a5; font-size: 12px; border-bottom: 1px solid #162b39; }
.offer-brand { color: white; font: 800 19px Manrope, sans-serif; }.offer-brand span { color: #50dfba; }
.offer-hero { min-height: 610px; position: relative; overflow: hidden; padding: 105px 24px 85px; text-align: center; background: #07131f; color: white; }
.offer-grid-glow { position: absolute; inset: 0; opacity: .65; background-image: linear-gradient(rgba(99,137,153,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(99,137,153,.08) 1px, transparent 1px), radial-gradient(circle at 50% 12%, rgba(40, 220, 173, .17), transparent 35%); background-size: 44px 44px, 44px 44px, auto; mask-image: linear-gradient(to bottom, black, transparent); }
.offer-hero > *:not(.offer-grid-glow) { position: relative; }.offer-eyebrow { color: #51dfbb; text-transform: uppercase; letter-spacing: .19em; font-size: 10px; font-weight: 800; }.offer-eyebrow.dark { color: #16816a; }
.offer-hero h1 { margin: 23px auto 22px; max-width: 1000px; font: 800 clamp(46px, 7vw, 82px)/1.02 Manrope, sans-serif; letter-spacing: -.065em; }.offer-hero h1 em { font-style: normal; background: linear-gradient(100deg, #59e3bd, #5aa6f7); color: transparent; background-clip: text; -webkit-background-clip: text; }
.offer-hero > p { max-width: 670px; margin: 0 auto; color: #94a7b6; font-size: 17px; line-height: 1.7; }
.hero-facts { margin-top: 50px; display: flex; justify-content: center; flex-wrap: wrap; gap: 26px; color: #a9bac6; font-size: 12px; }.hero-facts span { display: flex; align-items: center; gap: 8px; }.hero-facts i { width: 7px; height: 7px; border-radius: 50%; background: #4fe0ba; box-shadow: 0 0 15px #4fe0ba; }
.offer-content { max-width: 1180px; margin: -56px auto 0; position: relative; padding: 0 24px 90px; display: grid; gap: 24px; }
.diagnosis-card, .outcome-section, .rollout { background: white; border: 1px solid #e1e9e8; border-radius: 24px; padding: clamp(28px, 5vw, 60px); }.diagnosis-card h2, .outcome-section h2, .rollout h2 { margin: 12px 0 18px; font: 800 clamp(28px, 4vw, 43px)/1.15 Manrope, sans-serif; letter-spacing: -.05em; }.diagnosis-card p { max-width: 800px; color: #667982; font-size: 17px; line-height: 1.8; }
.outcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }.outcome-grid div { min-height: 135px; padding: 22px; border-radius: 16px; background: #f4f8f7; display: grid; align-content: space-between; }.outcome-grid span { color: #25a587; font-size: 11px; font-weight: 800; }.outcome-grid strong { font-size: 15px; line-height: 1.45; }
.selected-plan { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; padding: clamp(30px, 5vw, 64px); border-radius: 25px; color: white; background: radial-gradient(circle at 100% 0%, rgba(72, 222, 183, .14), transparent 35%), #081824; border: 1px solid #1d3544; }.plan-copy h2 { margin: 14px 0 8px; font: 800 clamp(38px, 5vw, 57px) Manrope, sans-serif; letter-spacing: -.05em; }.plan-copy p { color: #91a5b4; font-size: 16px; }.plan-copy ul { padding: 20px 0 0; margin: 0; list-style: none; display: grid; gap: 14px; }.plan-copy li { display: flex; align-items: center; gap: 10px; color: #c6d1d8; }.plan-copy li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #12392f; color: #53e0bc; font-size: 11px; }
.plan-price { padding: 28px; border: 1px solid #294353; border-radius: 20px; background: rgba(255,255,255,.035); display: grid; align-content: start; gap: 9px; }.plan-price > span { color: #91a5b4; font-size: 12px; }.plan-price > strong { font: 800 clamp(28px, 4vw, 43px) Manrope, sans-serif; letter-spacing: -.04em; }.plan-price > small { color: #7e93a3; }.plan-price hr { width: 100%; border: 0; border-top: 1px solid #29404f; margin: 16px 0; }.plan-price > div { display: flex; justify-content: space-between; gap: 16px; color: #9eb0bc; font-size: 12px; }.plan-price b { color: white; }.plan-price .discount b { color: #55dfbd; }.plan-price .grand-total { font-size: 15px; }.plan-price .grand-total b { font-size: 20px; }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 30px; }.timeline div { position: relative; padding: 25px 20px; border-left: 2px solid #4bd9b5; background: #f4f8f7; display: grid; gap: 8px; }.timeline span { color: #149879; font-size: 10px; font-weight: 800; }.timeline small { color: #71828b; }
.decision-card { padding: clamp(40px, 7vw, 78px); text-align: center; border-radius: 25px; background: linear-gradient(135deg, #0b2730, #0a1825); color: white; }.decision-card h2 { margin: 16px 0; font: 800 clamp(34px, 5vw, 54px) Manrope, sans-serif; letter-spacing: -.055em; }.decision-card p { max-width: 690px; margin: 0 auto; color: #97a9b6; line-height: 1.7; }.decision-actions { margin-top: 28px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }.accept-offer, .callback-offer { border-radius: 13px; padding: 15px 21px; font-weight: 800; }.accept-offer { border: 0; background: linear-gradient(135deg, #50e0bb, #63aaf5); color: #07131f; }.callback-offer { border: 1px solid #36505e; background: transparent; color: white; }
.offer-footer { padding: 40px max(24px, calc((100vw - 1132px) / 2)); background: #07131f; display: flex; justify-content: space-between; align-items: center; color: #7e93a2; font-size: 12px; }
.public-modal { background: rgba(3, 14, 21, .78); z-index: 30; }.accept-modal { width: min(480px, 100%); position: relative; padding: 34px; border-radius: 22px; background: white; }.accept-modal h2 { margin: 13px 0 8px; font: 800 30px Manrope, sans-serif; }.accept-modal p { color: var(--muted); line-height: 1.6; }.accept-close { position: absolute; right: 17px; top: 15px; border: 0; background: transparent; font-size: 23px; }.accept-modal form { margin-top: 23px; }.accept-modal .accept-offer { width: 100%; }.consent { display: flex; grid-template-columns: auto 1fr; align-items: start; gap: 9px; font-weight: 500; line-height: 1.45; }.consent input { margin-top: 2px; }

@media (max-width: 980px) {
  .shell { grid-template-columns: 72px minmax(320px, 390px) 1fr; }
  .sidebar { padding: 20px 10px; align-items: center; }
  .sidebar .brand span, .compose span, .folder span:not(.folder-count), .account .account-text { display: none; }
  .compose { text-align: center; font-size: 20px; }
  .folder { width: 50px; justify-content: center; font-size: 18px; }
  .folder-count { display: none; }
  .account { padding: 0; }
  .quote-shell { grid-template-columns: 72px 1fr; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .quote-row { grid-template-columns: minmax(200px, 1.3fr) 110px 150px minmax(170px, 1fr) 20px; }
  .editor-body { grid-template-columns: 1fr; }
  .quote-live-preview { position: relative; top: 0; height: auto; }
  .selected-plan { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: auto 0 0; height: 64px; z-index: 3; flex-direction: row; justify-content: space-around; padding: 8px; }
  .sidebar .brand, .account { display: none; }
  .folders { display: flex; gap: 0; }
  .compose { width: 48px; height: 48px; padding: 0; text-align: center; }
  .list-panel { min-height: calc(100vh - 64px); }
  .reader { display: none; }
  .reader.mobile-open { display: block; position: fixed; inset: 0 0 64px; z-index: 2; }
  .reader-head, .reader-body { padding-left: 22px; padding-right: 22px; }
  .quote-shell { grid-template-columns: 1fr; }
  .quotes-main { max-height: none; padding: 26px 16px 90px; }
  .quotes-header { align-items: flex-start; }.quotes-header h1 { font-size: 32px; }.quotes-header p { display: none; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.metric-grid article { padding: 15px; }.metric-grid strong { font-size: 18px; }
  .pipeline-legend { display: none; }.quote-list-head { padding: 17px; }
  .quote-row { grid-template-columns: 1fr auto; gap: 9px; padding: 15px; }.quote-row > div:nth-child(2), .quote-row > div:nth-child(3) { display: none; }.quote-row > div:nth-child(4) { justify-items: end; }.row-arrow { display: none; }
  .editor-top { padding: 0 12px; }.editor-top > div:nth-child(2) small { display: none; }.editor-actions .secondary { display: none; }.send-quote { padding: 11px; font-size: 12px; }
  .quote-form { padding: 24px 16px 80px; }.quote-form > section { padding-left: 0; }.section-number { position: static; margin-bottom: 12px; }.form-grid { grid-template-columns: 1fr; }.form-grid .wide { grid-column: auto; }.package-select { grid-template-columns: 1fr; }.extra-row { grid-template-columns: 1fr 100px 32px; }
  .offer-nav { padding: 0 18px; }.offer-nav > span { display: none; }.offer-hero { min-height: 570px; padding-top: 85px; }.offer-hero h1 { font-size: 46px; }.offer-hero > p { font-size: 15px; }.hero-facts { gap: 12px; }
  .offer-content { padding: 0 14px 60px; }.diagnosis-card, .outcome-section, .rollout, .selected-plan { border-radius: 19px; padding: 28px 22px; }.outcome-grid, .timeline { grid-template-columns: 1fr; }.outcome-grid div { min-height: 100px; }.decision-card { border-radius: 19px; padding: 42px 22px; }.decision-actions { display: grid; }.offer-footer { padding: 32px 20px; display: grid; gap: 8px; }
}