@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Prata&display=swap');

:root {
  --cream: #f6f1e7;
  --paper: #fffdf8;
  --ink: #20211f;
  --muted: #6f7069;
  --gold: #aa8752;
  --gold-soft: #e9dcc7;
  --line: #dcd4c7;
  --green: #426b55;
  --green-bg: #eef5ef;
  --amber: #94651f;
  --amber-bg: #fbf3df;
  --red: #9a4539;
  --red-bg: #f9ebe7;
  --shadow: 0 24px 70px rgba(47, 40, 28, .09);
  --serif: "Prata", Georgia, serif;
  --sans: "Manrope", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease-premium: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 10%, rgba(198, 164, 111, .11), transparent 28rem),
    var(--cream);
  min-width: 320px;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
button, input, select { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

:where(h1, h2, h3, p, li, span, a, button, label, strong, b, em, small) {
  -webkit-hyphens: none;
  hyphens: none;
  word-break: normal;
}

:where(h1, h2, h3, .lead, .pointBody p, .decisionCard li, .limits li) {
  overflow-wrap: normal;
  text-wrap: balance;
}

.topbar {
  z-index: 40;
  width: 100%;
  min-height: 88px;
  border-bottom: 1px solid rgba(225, 215, 197, .72);
  background: rgba(246, 241, 231, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
}
.topbarInner {
  width: 100%;
  max-width: 1540px;
  min-height: 88px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.platformNavStart {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.navBack {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 253, 248, .58);
  color: var(--ink);
  text-decoration: none;
  transition: color .18s, border-color .18s, transform .18s var(--ease-premium);
}
.navBack span { font-size: 19px; line-height: 1; }
.navBack:hover { color: var(--gold); border-color: #cbb681; transform: translateX(-1px); }
.navBack:active { transform: scale(.97); }
.navBack:focus-visible, .allToolsLink:focus-visible, .brand:focus-visible {
  outline: 3px solid rgba(170, 135, 82, .28);
  outline-offset: 3px;
}
.brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.brand img {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(73, 49, 12, .16));
}
.brand > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.brand b { white-space: nowrap; font-size: 16px; }
.brand small { color: #77746e; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; font-size: 9px; }
.toolBreadcrumb {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  color: #88837a;
  font-size: 11px;
}
.toolBreadcrumb a { text-decoration: none; }
.toolBreadcrumb a:hover { color: var(--gold); }
.toolBreadcrumb b { min-width: 0; overflow: hidden; color: #595d5f; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.topActions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.allToolsLink {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #5f625f;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .18s, color .18s, background-color .18s;
}
.allToolsLink span { color: var(--gold); font-size: 13px; }
.allToolsLink:hover { color: var(--ink); border-color: #cbb681; background: rgba(255, 253, 248, .72); }
.ecosystemLink { color: #4f504e; white-space: nowrap; font-size: 12px; font-weight: 700; text-decoration: none; }
.securePill { padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.45); color: #77746e; font-size: 11px; white-space: nowrap; }
.securePill i { width: 7px; height: 7px; display: inline-block; margin-right: 8px; border-radius: 50%; background: var(--green); }

main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.hero { padding: 88px 0 42px; max-width: 900px; }
.eyebrow {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  font-size: 11px;
}
h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.04;
}
h1 { font-size: clamp(46px, 7vw, 82px); margin: 18px 0 24px; }
h1 em { color: var(--gold); font-weight: 600; }
.lead { max-width: 740px; margin: 0; color: #595a54; font-size: clamp(17px, 2.1vw, 21px); }
.privacy {
  margin-top: 34px;
  display: inline-flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  border: 1px solid rgba(66, 107, 85, .23);
  background: rgba(238, 245, 239, .68);
  border-radius: 15px;
  color: var(--green);
  position: relative;
  overflow: hidden;
}
.privacy > span { font-size: 13px; padding-top: 2px; }
.privacy strong, .privacy small { display: block; }
.privacy small { color: #66766b; margin-top: 2px; }

.workspace { margin: 24px 0 96px; }
.dropzone {
  min-height: 310px;
  border: 1.5px dashed #bba987;
  border-radius: 26px;
  background: rgba(255, 253, 248, .67);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 46px 24px;
  cursor: pointer;
  transition: .2s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.dropzone:hover, .dropzone:focus-visible, .dropzone.isDragging {
  border-color: var(--gold);
  background: var(--paper);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  outline: none;
}
.uploadIcon {
  margin: 0 auto 15px;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gold);
  border: 1px solid var(--gold-soft);
  background: #fbf7ef;
  font-size: 25px;
}
.dropzone h2 { font-size: clamp(29px, 4vw, 42px); margin: 0 0 8px; }
.dropzone p { margin: 0 0 10px; color: var(--muted); }
.dropzone small { color: #898980; }
.fakeLink { color: var(--gold); border-bottom: 1px solid currentColor; }
.demoRow { margin: 14px 0 0; text-align: center; color: var(--muted); font-size: 13px; }
.demoRow .textButton { margin-left: 3px; }
.processing, .fileCard {
  margin-top: 18px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 18px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.processing strong, .processing small, .fileCard strong, .fileCard small { display: block; }
.processing small, .fileCard small { color: var(--muted); margin-top: 3px; }
.spinner { width: 26px; height: 26px; border: 2px solid var(--gold-soft); border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fileCard { justify-content: space-between; }
.fileCard > div { display: grid; grid-template-columns: auto 1fr; column-gap: 13px; align-items: center; }
.fileCard small { grid-column: 2; }
.fileTag { grid-row: 1 / span 2; background: #f0e6d6; color: #806133; border-radius: 8px; padding: 8px 9px; font-size: 11px; font-weight: 700; }
.notice { margin-top: 18px; padding: 18px 20px; border-radius: 14px; }
.notice.error { color: var(--red); background: var(--red-bg); border: 1px solid #eac3bb; }

.results { padding-bottom: 110px; }
.sectionHead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 58px; }
.sectionHead h2, .decision h2, .limits h2 { margin: 9px 0 0; font-size: clamp(36px, 5vw, 55px); }
.sectionIntro { max-width: 740px; color: var(--muted); margin: 20px 0 30px; }
.summaryBadge { padding: 12px 16px; border-radius: 100px; background: #eee4d3; color: #6f562f; font-size: 13px; white-space: nowrap; }
.fieldsGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fieldCard { min-height: 158px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,253,248,.75); display: flex; flex-direction: column; }
.fieldCard .fieldLabel { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.fieldCard strong { margin: 12px 0 18px; font-size: 17px; word-break: break-word; }
.fieldCard .emptyValue { color: #95958c; font-weight: 500; }
.fieldFooter { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.confidence { font-size: 11px; color: var(--green); }
.confidence.none { color: #92928a; }

.textButton { border: 0; background: none; color: var(--gold); padding: 7px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.textButton:disabled { color: #aaa79f; cursor: default; text-decoration: none; }
.checkpointsHead { margin-top: 90px; }
.savedState { color: var(--green); font-size: 12px; padding: 9px 12px; border: 1px solid #c8d8cc; border-radius: 100px; }
.checkpointList { display: grid; gap: 11px; margin-top: 30px; }
.checkpoint {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  background: var(--paper);
}
.pointNumber { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); background: #f2ebdf; color: #876c43; }
.pointBody h3 { margin: 0 0 5px; font-size: 16px; }
.pointBody p { margin: 0; color: var(--muted); font-size: 14px; }
.pointTools { min-width: 190px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.statusSelect { min-width: 185px; border: 1px solid var(--line); border-radius: 10px; background: #fffdfa; padding: 9px 32px 9px 10px; color: var(--ink); }
.checkpoint[data-status="stop"] { border-left: 4px solid var(--red); }
.checkpoint[data-status="question"] { border-left: 4px solid var(--amber); }
.checkpoint[data-status="confirmed"] { border-left: 4px solid var(--green); }

.decision { margin-top: 96px; }
.decisionGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; align-items: start; }
.decisionCard { border-radius: 20px; padding: 23px; min-height: 230px; border: 1px solid transparent; }
.decisionCard h3 { margin: 0 0 16px; font-size: 16px; }
.decisionCard ul { margin: 0; padding-left: 19px; display: grid; gap: 11px; font-size: 13px; }
.decisionCard p { color: var(--muted); font-size: 13px; }
.stopCard { background: var(--red-bg); border-color: #edc8c0; color: #713830; }
.questionCard { background: var(--amber-bg); border-color: #e9d4a7; color: #6d4c1b; }
.confirmedCard { background: var(--green-bg); border-color: #cbdccc; color: #355544; }

.limits { margin-top: 82px; padding: 38px; border: 1px solid var(--line); border-radius: 24px; background: #252622; color: #f8f4ea; display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; }
.limits .eyebrow { color: #d4b477; }
.limits h2 { font-size: clamp(34px, 4vw, 48px); }
.limits ul { margin: 3px 0 0; padding-left: 20px; display: grid; gap: 12px; color: #d7d5cd; font-size: 14px; }
.signature { margin-top: 18px; border: 1px solid var(--line); background: var(--paper); border-radius: 20px; padding: 23px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.signatureIcon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; background: #f0e6d6; color: #7c5e31; font-weight: 700; font-size: 13px; }
.signature h3, .signature p { margin: 0; }
.signature p { margin-top: 4px; color: var(--muted); font-size: 13px; }
.signature a { color: var(--gold); font-size: 13px; }
.actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.primaryButton, .secondaryButton { border-radius: 12px; padding: 14px 20px; cursor: pointer; font-weight: 600; }
.primaryButton { border: 1px solid var(--ink); color: #fff; background: var(--ink); }
.primaryButton:hover { background: #343631; }
.secondaryButton { border: 1px solid #bda679; color: #705830; background: #f7f0e4; }
.secondaryButton:hover { background: #efe2cd; }
.dangerButton { color: var(--red); margin-left: auto; }

footer { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 36px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 12px; }
footer span:first-child { color: var(--ink); font-family: var(--serif); font-size: 16px; }

dialog { width: min(700px, calc(100% - 30px)); border: 1px solid var(--line); border-radius: 22px; background: var(--paper); color: var(--ink); padding: 34px; box-shadow: 0 30px 90px rgba(0,0,0,.2); }
dialog::backdrop { background: rgba(31,31,28,.58); backdrop-filter: blur(3px); }
dialog h2 { font-size: 34px; margin: 9px 0 20px; }
dialog blockquote { margin: 0; padding: 20px; background: #f5efe4; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; font-size: 15px; overflow-wrap: anywhere; }
dialog > p { color: var(--muted); font-size: 12px; }
.dialogClose { position: absolute; top: 16px; right: 17px; border: 0; background: none; font-size: 28px; color: var(--muted); cursor: pointer; }

@keyframes egrnPremiumEnter {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes egrnPremiumScale {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.988); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes egrnSignalSweep {
  from { opacity: 0; transform: translate3d(-180%, 0, 0) skewX(-18deg); }
  35% { opacity: .55; }
  to { opacity: 0; transform: translate3d(780%, 0, 0) skewX(-18deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .platformTopbar { animation: egrnPremiumEnter .5s var(--ease-premium) both; }
  .hero .eyebrow { animation: egrnPremiumEnter .58s var(--ease-premium) .05s both; }
  .hero h1 { animation: egrnPremiumEnter .7s var(--ease-premium) .09s both; }
  .hero .lead { animation: egrnPremiumEnter .68s var(--ease-premium) .15s both; }
  .hero .privacy { animation: egrnPremiumEnter .64s var(--ease-premium) .22s both; }
  .workspace { animation: egrnPremiumScale .74s var(--ease-premium) .27s both; }

  .privacy::after {
    content: "";
    pointer-events: none;
    width: 15%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
    position: absolute;
    inset: -30% auto -30% -20%;
    animation: egrnSignalSweep 1.05s var(--ease-premium) .48s both;
  }

  .fieldCard,
  .checkpoint,
  .decisionCard,
  .limits,
  .signature {
    animation: egrnPremiumEnter .56s var(--ease-premium) both;
  }

  .fieldsGrid .fieldCard:nth-child(2), .checkpointList .checkpoint:nth-child(2) { animation-delay: .035s; }
  .fieldsGrid .fieldCard:nth-child(3), .checkpointList .checkpoint:nth-child(3) { animation-delay: .07s; }
  .fieldsGrid .fieldCard:nth-child(4), .checkpointList .checkpoint:nth-child(4) { animation-delay: .105s; }
  .fieldsGrid .fieldCard:nth-child(5), .checkpointList .checkpoint:nth-child(5) { animation-delay: .14s; }
  .fieldsGrid .fieldCard:nth-child(6), .checkpointList .checkpoint:nth-child(6) { animation-delay: .175s; }
}

@media (hover: hover) and (pointer: fine) {
  .fieldCard,
  .checkpoint,
  .decisionCard,
  .signature {
    transition: transform .24s var(--ease-premium), border-color .24s, box-shadow .24s var(--ease-premium);
  }

  .fieldCard:hover,
  .checkpoint:hover,
  .decisionCard:hover,
  .signature:hover {
    transform: translate3d(0, -3px, 0);
    border-color: #cdbb98;
    box-shadow: 0 16px 36px rgba(47, 40, 28, .07);
  }
}

@media (max-width: 1050px) {
  .toolBreadcrumb { display: none; }
}

@media (max-width: 760px) {
  .topbar { min-height: calc(74px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .topbarInner { min-height: 74px; }
  .ecosystemLink, .securePill { display: none; }
  .allToolsLink { width: 44px; justify-content: center; padding: 0; font-size: 0; }
  .allToolsLink span { font-size: 15px; }
}

@media (max-width: 850px) {
  .fieldsGrid { grid-template-columns: repeat(2, 1fr); }
  .decisionGrid { grid-template-columns: 1fr; }
  .limits { grid-template-columns: 1fr; gap: 20px; }
  .signature { grid-template-columns: auto 1fr; }
  .signature a { grid-column: 2; }
  .checkpoint { grid-template-columns: 40px 1fr; }
  .pointTools { grid-column: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 600px) {
  main, body > footer { width: min(100% - 28px, 1180px); }
  .topbarInner { min-height: 72px; padding: 0 14px; gap: 10px; }
  .platformNavStart { gap: 8px; }
  .navBack { width: 42px; height: 42px; flex-basis: 42px; }
  .brand { gap: 9px; }
  .brand img { width: 40px; height: 40px; flex-basis: 40px; }
  .brand small { display: none; }
  .brand b { max-width: 116px; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
  .hero { padding-top: 60px; }
  h1 { font-size: clamp(39px, 12vw, 52px); }
  .privacy { border-radius: 13px; }
  .dropzone { min-height: 260px; border-radius: 20px; }
  .fieldsGrid { grid-template-columns: 1fr; }
  .sectionHead { align-items: flex-start; flex-direction: column; }
  .summaryBadge, .savedState { align-self: flex-start; }
  .checkpoint { padding: 17px 15px; gap: 12px; }
  .pointTools { grid-column: 1 / -1; }
  .statusSelect { flex: 1; min-width: 0; }
  .limits { padding: 26px 22px; }
  .signature { grid-template-columns: 1fr; }
  .signature a { grid-column: 1; }
  .actions { align-items: stretch; flex-direction: column; }
  .primaryButton, .secondaryButton { width: 100%; }
  .dangerButton { margin: 8px 0 0; }
  footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
  .platformTopbar, .hero .eyebrow, .hero h1, .hero .lead, .hero .privacy, .workspace,
  .fieldCard, .checkpoint, .decisionCard, .limits, .signature { animation: none !important; transform: none !important; }
  .privacy::after { display: none; }
  .spinner { animation-duration: 1.8s; }
}