:root {
  --paper: #f8fafb;
  --card: rgba(255, 255, 255, 0.88);
  --ink: #17212b;
  --muted: #68727e;
  --line: rgba(23, 33, 43, 0.12);
  --accent: #11161c;
  --accent-2: #6f7782;
  --soft: #f2f3f5;
  --sand: #f4f0e9;
  --warn: #a6631b;
  --danger: #9f2f2f;
  --shadow: 0 24px 80px rgba(37, 52, 68, 0.08);
  --deep-shadow: 0 46px 120px rgba(37, 52, 68, 0.12);
  --radius: 20px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 0%, rgba(23, 33, 43, 0.07), transparent 34rem),
    radial-gradient(circle at 92% 18%, rgba(111, 119, 130, 0.08), transparent 28rem),
    linear-gradient(180deg, #fff 0%, var(--paper) 48%, #f5f6f7 100%);
  overflow-x: hidden;
}

button, input, select, textarea { font: inherit; }

button { cursor: pointer; }

.hidden { display: none !important; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  background: var(--accent);
  color: white;
  padding: .8rem 1rem;
  border-radius: 999px;
}

.skip-link:focus { top: 1rem; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  padding: .85rem clamp(1rem, 4vw, 3rem);
  background: rgba(255, 255, 255, .78);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand img { height: 34px; display: block; }

.product-switch {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem;
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.product-switch a {
  text-decoration: none;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 750;
  padding: .68rem .95rem;
  border-radius: 999px;
}

.product-switch a.is-active {
  background: var(--accent);
  color: white;
}

.app-shell {
  width: min(1440px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(1.2rem, 3vw, 2.6rem) 0 5rem;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
  gap: clamp(1rem, 4vw, 3rem);
  align-items: stretch;
  min-height: 520px;
}

.hero > *, .login-grid > *, .portal > *, .split > *, .draft-layout > *, .admin-grid > * {
  min-width: 0;
}

.hero-copy, .hero-card, .login-card, .panel, .step-card, .professional-offer, .email-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.hero-copy {
  padding: clamp(1.6rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.eyebrow {
  display: inline-flex;
  color: var(--accent-2);
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .75rem;
}

h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4, p, .eyebrow { overflow-wrap: anywhere; }

h1, h2, h3, .quote-preview strong, .metric-grid strong {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -0.035em;
}

h1 {
  font-size: clamp(2.6rem, 7vw, 6.4rem);
  line-height: .9;
  max-width: 920px;
  margin: .8rem 0 1.2rem;
}

h2 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: .98; margin-bottom: .7rem; }
h3 { font-size: clamp(1.45rem, 2vw, 2.2rem); line-height: 1.05; margin-bottom: .8rem; }
h4 { font-size: 1rem; margin-bottom: .5rem; }

p { color: var(--muted); line-height: 1.65; }

.hero-copy p { font-size: clamp(1.05rem, 1.8vw, 1.35rem); max-width: 760px; }

.hero-actions, .button-row, .wizard-actions, .editor-toolbar {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
}

.primary-button, .secondary-button, .ghost-button {
  border: 0;
  min-height: 48px;
  border-radius: 999px;
  padding: .9rem 1.15rem;
  font-weight: 850;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.primary-button {
  color: white;
  background: linear-gradient(135deg, var(--accent), #303842);
  box-shadow: 0 14px 35px rgba(17, 22, 28, .16);
}

.secondary-button, .ghost-button {
  color: var(--accent);
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--line);
}

.primary-button:hover, .secondary-button:hover, .ghost-button:hover { transform: translateY(-2px); }
.full { width: 100%; justify-content: center; }

.trust-row {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.trust-row span, .admin-badge, .panel-head span {
  background: rgba(17, 22, 28, .055);
  color: var(--accent);
  border: 1px solid rgba(17, 22, 28, .1);
  padding: .45rem .65rem;
  border-radius: 999px;
  font-size: .83rem;
  font-weight: 800;
}

.hero-card { padding: 1.25rem; display: grid; gap: 1rem; align-content: center; }
.card-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.card-head span { color: var(--muted); font-weight: 750; }
.card-head strong { font-size: 1.15rem; }

.mini-flow {
  list-style: none;
  display: grid;
  gap: .75rem;
  padding: 0;
  margin: 0;
}

.mini-flow li {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  color: var(--muted);
  font-weight: 800;
}

.mini-flow li.done { color: var(--accent); }
.mini-flow li.current { color: var(--ink); border-color: rgba(17, 22, 28, .24); box-shadow: inset 4px 0 0 var(--accent); }

.quote-preview {
  padding: 1.25rem;
  border-radius: 22px;
  color: white;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    linear-gradient(135deg, var(--accent), #303842);
}

.quote-preview small, .quote-preview span { display: block; opacity: .72; }
.quote-preview strong { display: block; font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: .92; margin: .35rem 0; }

.login-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.login-card { padding: clamp(1.2rem, 3vw, 2rem); }
.login-card.soft { background: rgba(242, 243, 245, .72); }
.login-form, .form-grid, .admin-grid { display: grid; gap: .9rem; }

label { display: grid; gap: .4rem; color: var(--accent); font-weight: 850; }

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  background: rgba(255,255,255,.88);
  padding: .9rem 1rem;
  outline: none;
}

textarea { resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { border-color: rgba(17, 22, 28, .45); box-shadow: 0 0 0 4px rgba(17, 22, 28, .08); }

.billing-options { display: grid; gap: .8rem; }
.billing-options div, .setup-list div, .case-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  padding: 1rem;
}

.portal {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.sidebar {
  position: sticky;
  top: 86px;
  align-self: start;
  min-height: calc(100vh - 110px);
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}

.side-nav { display: grid; gap: .45rem; margin: 1rem 0; }
.side-nav button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  text-align: left;
  padding: .9rem 1rem;
  border-radius: 16px;
  font-weight: 850;
}
.side-nav button.is-active { background: var(--accent); color: white; }

.api-status {
  display: grid;
  gap: .35rem;
  padding: 1rem;
  background: rgba(17, 22, 28, .045);
  border: 1px solid rgba(17, 22, 28, .1);
  border-radius: 18px;
}
.api-status span {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 0 8px rgba(17, 22, 28, .08);
}
.api-status small { color: var(--muted); line-height: 1.4; }

.content { min-width: 0; }
.view { display: none; }
.view.is-active { display: block; }

.view-head, .wizard-head, .panel-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.metric-grid article {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1rem;
  box-shadow: var(--shadow);
}
.metric-grid span, .metric-grid small { display: block; color: var(--muted); }
.metric-grid strong { display: block; font-size: clamp(2rem, 4vw, 3.25rem); line-height: .95; margin: .35rem 0; }

.split, .draft-layout, .admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
  gap: 1rem;
}

.panel { padding: 1.2rem; }
.check-list, .warn-list { margin: 0; padding-left: 1.2rem; color: var(--muted); line-height: 1.8; }
.case-list { display: grid; gap: .75rem; }
.case-item { display: grid; gap: .25rem; }
.case-item strong { color: var(--ink); }
.case-item span { color: var(--muted); }

.step-pills { display: flex; gap: .35rem; flex-wrap: wrap; }
.step-pills button {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  color: var(--muted);
  min-height: 38px;
  border-radius: 999px;
  padding: .45rem .75rem;
  font-weight: 850;
}
.step-pills button.is-active { background: var(--accent); color: white; }

.wizard-step { display: none; }
.wizard-step.is-active { display: block; }
.step-card { padding: clamp(1.15rem, 3vw, 2rem); }
.step-card.wide { overflow: hidden; }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.analysis-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.analysis-grid article {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  padding: 1rem;
}
.tag-list { display: flex; gap: .45rem; flex-wrap: wrap; }
.tag-list span {
  border-radius: 999px;
  padding: .45rem .6rem;
  background: rgba(17, 22, 28, .055);
  color: var(--accent);
  font-weight: 800;
}

.positions-preview, .catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}
.position-card, .catalog-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.7);
  padding: 1rem;
}
.position-card strong, .catalog-card strong { display: block; margin-bottom: .25rem; }
.position-card small, .catalog-card small { color: var(--muted); line-height: 1.4; }

.offer-editor { display: grid; gap: .75rem; margin-top: 1rem; overflow-x: auto; }
.editor-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) 90px 90px 120px 120px 42px;
  gap: .5rem;
  align-items: end;
  min-width: 760px;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.66);
}
.editor-row button {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  min-height: 46px;
  color: var(--danger);
  font-weight: 900;
}
.review-flag { color: var(--warn); font-weight: 850; font-size: .85rem; margin-top: .3rem; display: block; }
.total-box {
  margin-top: 1rem;
  margin-left: auto;
  max-width: 360px;
  padding: 1rem;
  border-radius: 20px;
  background: var(--accent);
  color: white;
}
.total-box span, .total-box small { display: block; opacity: .75; }
.total-box strong { display: block; font-family: Georgia, serif; font-size: 2.5rem; line-height: .95; margin: .25rem 0; }

.professional-offer {
  padding: clamp(1.2rem, 3vw, 2.2rem);
  background: #fff;
  min-height: 720px;
}
.offer-letter-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1rem;
  margin-bottom: 1.4rem;
}
.offer-letter-head strong { font-family: Georgia, serif; font-size: 1.6rem; }
.offer-meta { color: var(--muted); text-align: right; line-height: 1.55; }
.offer-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.offer-table th, .offer-table td { padding: .75rem .45rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.offer-table th:last-child, .offer-table td:last-child { text-align: right; }
.offer-sum { text-align: right; font-size: 1.4rem; font-weight: 900; }
.email-card { padding: 1.2rem; position: sticky; top: 86px; align-self: start; }

.wizard-actions { justify-content: space-between; margin-top: 1rem; }
.fineprint { font-size: .9rem; color: var(--muted); margin-top: .8rem; margin-bottom: 0; }

.toggle-row { grid-template-columns: auto 1fr; align-items: center; color: var(--ink); }
.toggle-row input { width: auto; }
.setup-list { display: grid; gap: .65rem; margin-bottom: 1rem; }
.setup-list div { display: grid; gap: .2rem; }
.setup-list span { color: var(--muted); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  z-index: 50;
  color: white;
  background: var(--accent);
  border-radius: 999px;
  padding: .9rem 1.2rem;
  box-shadow: var(--shadow);
  font-weight: 850;
}

@media (max-width: 980px) {
  .hero, .login-grid, .portal, .split, .draft-layout, .admin-grid { grid-template-columns: 1fr; }
  .sidebar { position: static; min-height: auto; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analysis-grid, .positions-preview, .catalog-grid { grid-template-columns: 1fr; }
  .email-card { position: static; }
}

@media (max-width: 720px) {
  .topbar { align-items: stretch; flex-direction: column; }
  .brand img { height: 30px; }
  .product-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 22px;
    width: 100%;
  }
  .product-switch a {
    min-height: 58px;
    display: grid;
    place-items: center;
    border-radius: 16px;
  }
  .ghost-button { display: none; }
  .app-shell { width: min(100% - 1rem, 1440px); }
  .hero { min-height: auto; }
  .hero-copy, .hero-card, .login-card, .panel, .step-card, .professional-offer, .email-card { border-radius: 20px; }
  .hero-actions .primary-button, .hero-actions .secondary-button, .button-row button, .wizard-actions button {
    width: 100%;
    min-height: 58px;
  }
  .form-grid, .metric-grid { grid-template-columns: 1fr; }
  h1 { font-size: clamp(2.55rem, 15vw, 4.4rem); }
  .view-head, .wizard-head { display: grid; }
}

@media print {
  .topbar, .hero, .login-grid, .sidebar, .wizard-head, .wizard-actions, .email-card, .toast { display: none !important; }
  body { background: white; }
  .app-shell { width: auto; padding: 0; }
  .portal, .content, .view, .wizard-step, .draft-layout { display: block !important; }
  .professional-offer { box-shadow: none; border: 0; }
}