@charset "UTF-8";
:root {
  --bg:#f7f8f2;
  --ink:#203e34;
  --green:#176653;
  --muted:#64766c;
  --line:#dce2d7;
  --sage:#e8eee2;
  --accent:#d2e3ad;
  --white:#fff;
  --radius:22px;
  color-scheme:light;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}
body {
  margin:0
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
img {
  max-width:100%;
  height:auto;
  display:block
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:default
}
a:focus-visible,button:focus-visible {
  outline:3px solid #7d982f;
  outline-offset:5px
}
::selection {
  background:#d2e3ad;
  color:#203e34
}
.wrap {
  width:min(1200px,calc(100% - 80px));
  margin-inline:auto
}
.section {
  padding-block:100px
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-weight:500
}
h1 {
  font-size:clamp(38px,3.65vw,53px);
  line-height:1.1;
  letter-spacing:-2.1px
}
h1>span,h2>span {
  color:var(--green)
}
h2 {
  font-size:clamp(32px,3.2vw,44px);
  line-height:1.13;
  letter-spacing:-1.5px
}
h3 {
  font-size:23px;
  letter-spacing:-.5px
}
.eyebrow {
  font-size:14px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  margin-bottom:23px
}
.lead {
  font-size:17px;
  line-height:1.65;
  color:var(--muted)
}
.micro {
  font-size:14px;
  line-height:1.6;
  color:var(--muted)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  min-height:54px;
  padding:17px 24px;
  background:var(--green);
  color:white;
  border:1px solid transparent;
  border-radius:9px;
  font-size:14px;
  font-weight:600;
  transition:background .2s,transform .2s
}
.button:hover {
  background:#114e40;
  transform:translateY(-2px)
}
.button span {
  font-size:21px;
  font-weight:400
}
.text-link {
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:16px
}
.text-link:hover {
  text-decoration:underline;
  text-underline-offset:4px
}
.skip {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:10;
  background:white;
  padding:15px
}
.skip:focus {
  top:12px
}
.skip:not(:focus) {
  clip-path:inset(50%);
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
}
.header {
  height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:24px
}
.brand {
  display:inline-flex;
  gap:9px;
  align-items:center;
  flex-shrink:0;
  font-size:25px;
  font-weight:700;
  letter-spacing:-1px
}
.brand-accent {
  color:var(--green)
}
.brand small {
  font-size:14px;
  letter-spacing:0;
  color:var(--muted);
  margin-left:5px;
  vertical-align:super
}
.header nav {
  display:flex;
  gap:32px;
  font-size:14px;
  color:var(--muted)
}
.header nav a:hover {
  color:var(--green)
}
.header-action {
  font-size:14px;
  border:1px solid #bdc9bb;
  padding:11px 17px;
  border-radius:7px;
  display:flex;
  gap:27px;
  align-items:center
}
.header-action:hover {
  background:var(--sage)
}
.header-action span {
  font-size:19px
}
.hero {
  display:grid;
  grid-template-columns:1.13fr 1fr;
  align-items:center;
  gap:40px;
  min-height:700px;
  padding-block:50px 55px
}
.hero-copy {
  padding-block:30px
}
.hero-copy .eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  letter-spacing:1.2px
}
.status-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green)
}
.hero-copy .lead {
  max-width:430px;
  margin-top:25px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:32px
}
.hero-copy .micro {
  margin-top:15px
}
.hero-visual {
  height:570px;
  background:#e8eddf;
  border-radius:26px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate
}
.visual-grid {
  position:absolute;
  inset:0;
  border-radius:26px;
  overflow:hidden;
  background-image:linear-gradient(#d2dccd80 1px,transparent 1px),linear-gradient(90deg,#d2dccd80 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(150deg,black,transparent 80%);
  z-index:-1
}
.visual-caption {
  position:absolute;
  top:29px;
  left:27px;
  font-size:14px;
  line-height:1.6;
  color:#5e745f
}
.phone {
  width:238px;
  background:#fff;
  border:6px solid #233f36;
  border-radius:28px;
  box-shadow:8px 18px 34px #203e3426;
  overflow:hidden;
  transform:rotate(3deg);
  margin-top:21px
}
.phone-top {
  height:28px;
  background:#233f36;
  color:#e5eee1;
  display:flex;
  justify-content:space-between;
  padding-inline:11px;
  font-size:14px;
  align-items:center
}
.phone>img {
  width:100%;
  aspect-ratio:780/1688;
  object-fit:cover
}
.floating-quote {
  position:absolute;
  bottom:56px;
  left:-24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:13px;
  padding:17px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 10px 30px #203e3412;
  transform:rotate(-3deg)
}
.floating-quote:hover {
  transform:rotate(-3deg) translateY(-3px)
}
.file-icon {
  width:38px;
  height:44px;
  background:#edf3e8;
  color:var(--green);
  border-radius:5px;
  display:grid;
  place-items:center;
  font-size:25px
}
.floating-quote strong {
  font-size:14px;
  font-weight:600;
  display:block
}
.floating-quote small {
  font-size:14px;
  color:var(--muted);
  display:block;
  margin-top:6px
}
.file-tag {
  font-size:14px;
  color:var(--green);
  background:#f0f4e9;
  padding:7px;
  border-radius:5px;
  margin-left:12px
}
.visual-footnote {
  position:absolute;
  bottom:18px;
  right:21px;
  font-size:14px;
  color:#5e745f
}
.scope {
  border-block:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  padding-block:24px;
  gap:15px;
  font-size:14px;
  color:var(--muted)
}
.scope span {
  display:flex;
  gap:12px;
  align-items:center
}
.scope span:before {
  content:'+';
  color:#819678;
  font-size:15px
}
.section-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:39px
}
.section-head>p {
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  padding-bottom:4px
}
.scenario-tabs {
  display:inline-flex;
  gap:5px;
  background:#e9ede3;
  border:1px solid var(--line);
  border-radius:9px;
  padding:5px;
  margin-bottom:32px
}
.scenario-tabs button {
  border:0;
  background:transparent;
  color:#627064;
  border-radius:6px;
  padding:12px 20px;
  font-size:14px;
  display:flex;
  gap:14px;
  align-items:center
}
.scenario-tabs button span {
  font-size:14px
}
.scenario-tabs button[aria-selected=true] {
  background:white;
  box-shadow:0 2px 4px #203e3408;
  color:var(--green)
}
.workflow {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px
}
.step-heading {
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
  min-height:32px
}
.step-heading>span {
  width:24px;
  height:24px;
  border:1px solid #bac9b6;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:14px
}
.step-heading h3 {
  font-size:14px;
  letter-spacing:0
}
.step-heading b {
  margin-left:auto;
  font-weight:400;
  color:#809378
}
.app-frame,.quote-frame {
  height:403px;
  background:#edf1e8;
  border:1px solid var(--line);
  border-radius:15px;
  overflow:hidden
}
.app-frame {
  padding:19px 43px 0;
  display:flex;
  justify-content:center;
  align-items:flex-start
}
.app-frame>img {
  width:244px;
  border:1px solid #d5dfd2;
  border-radius:11px;
  box-shadow:0 7px 18px #203e340d
}
.quote-frame {
  display:flex;
  position:relative;
  align-items:flex-start;
  justify-content:center;
  padding:23px 21px 40px;
  background:#e8ece3
}
.quote-frame>img {
  width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  box-shadow:0 3px 12px #203e3410;
  background:white
}
.zoom-label {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:36px;
  background:#ffffffed;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 17px;
  font-size:14px;
  color:var(--green)
}
.quote-frame:hover .zoom-label {
  background:var(--green);
  color:white
}
.step>p {
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  margin-top:16px
}
.step>p a {
  text-decoration:underline;
  text-underline-offset:3px;
  white-space:nowrap
}

.demo-note {
  display:flex;
  gap:9px;
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
  border-top:1px solid var(--line);
  margin-top:29px;
  padding-top:18px
}
.demo-note>span {
  font-size:15px
}
.features {
  background:#edf1e7;
  border-block:1px solid var(--line)
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:25px
}
.feature-grid article {
  display:flex;
  flex-direction:column;
  padding-top:25px;
  border-top:1px solid #becbbb
}
.feature-number {
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
  margin-bottom:25px
}
.feature-grid h3 {
  font-size:21px;
  line-height:1.2;
  min-height:50px;
  margin-bottom:13px
}
.feature-grid p {
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  margin-bottom:25px
}
.window-sketch {
  color:#648375;
  margin-top:auto
}
.window-sketch svg {
  width:100%;
  height:75px
}
.material-tags {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:auto;
  min-height:75px;
  align-content:center
}
.material-tags span {
  font-size:14px;
  border:1px solid #c4d1bd;
  border-radius:5px;
  padding:7px 9px
}
.feature-bottom {
  margin-top:auto;
  min-height:75px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  font-size:14px
}
.feature-bottom>span {
  color:var(--muted)
}
.feature-bottom strong {
  font-size:21px;
  font-weight:500
}
.feature-bottom .arrow-right {
  margin-left:auto;
  color:var(--green);
  font-size:30px
}
.storage-note {
  border-top:1px solid #ccd7c5;
  margin-top:35px;
  padding-top:20px;
  font-size:14px;
  line-height:1.7;
  color:var(--muted)
}
.pricing {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:110px;
  align-items:center
}
.price-copy .lead {
  margin-top:25px;
  max-width:410px
}
.access-note {
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
  margin-top:30px;
  padding-left:15px;
  border-left:2px solid #b5c99c;
  max-width:350px
}
.price-card {
  background:white;
  border:1px solid #d2ddc7;
  border-radius:var(--radius);
  padding:35px 36px;
  position:relative;
  box-shadow:0 12px 45px #31452906
}
.trial-tag {
  background:var(--accent);
  color:#355122;
  padding:8px 12px;
  border-radius:5px;
  font-size:14px;
  display:inline-block;
  margin-bottom:25px
}
.price-card h3 {
  font-size:17px;
  margin-bottom:12px
}
.price {
  font-size:64px;
  letter-spacing:-2px;
  line-height:1.1
}
.price>span {
  font-size:17px;
  letter-spacing:0;
  color:var(--muted)
}
.price-subtitle {
  font-size:14px;
  margin-top:8px;
  color:var(--muted)
}
.price-card ul {
  list-style:none;
  padding:24px 0;
  margin:24px 0;
  border-block:1px solid var(--line);
  font-size:14px
}
.price-card li+li {
  margin-top:16px
}
.price-card li:before {
  content:'✓';
  color:var(--green);
  margin-right:11px
}
.price-card .button {
  width:100%
}
.price-card .button:disabled {
  background:#e4eadc;
  color:#5c7052;
  transform:none;
  border-color:#d4dfc9
}
.renewal {
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
  margin-top:16px
}
.closing {
  background:#203f34;
  border-radius:var(--radius);
  padding:48px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  color:#f2f6e9
}
.closing .eyebrow {
  color:#b0c7a0;
  font-size:14px;
  margin-bottom:16px
}
.closing h2 {
  font-size:32px;
  letter-spacing:-1px
}
.button-light {
  background:#d6e5b6;
  color:#25422d;
  flex-shrink:0
}
.button-light:hover {
  background:#e1edca
}
.footer {
  display:flex;
  align-items:center;
  gap:30px;
  padding-block:40px;
  font-size:14px;
  color:var(--muted)
}
.footer .brand {
  font-size:21px;
  color:var(--ink)
}
.footer>span {
  margin-left:auto
}
dialog {
  padding:0 22px 23px;
  border:1px solid var(--line);
  border-radius:15px;
  width:min(700px,calc(100% - 24px));
  max-height:90dvh;
  background:#f7f8f2;
  color:var(--ink)
}
dialog::backdrop {
  background:#173c31b3;
  backdrop-filter:blur(4px)
}
.dialog-toolbar {
  position:sticky;
  top:0;
  z-index:1;
  background:#f7f8f2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:15px 0
}
.dialog-toolbar h2 {
  font-size:16px;
  letter-spacing:0
}
.close-dialog {
  border:1px solid var(--line);
  background:white;
  border-radius:6px;
  min-width:40px;
  min-height:40px;
  color:var(--ink)
}
dialog>img {
  width:100%;
  height:auto
}
dialog>.text-link {
  margin-top:20px
}
.preview-open {
  overflow:hidden
}
[hidden] {
  display:none!important
}
html:not(.js) [role=tabpanel][hidden] {
  display:block!important
}
html:not(.js) .scenario-tabs {
  display:none
}
html:not(.js) #scenario-door {
  margin-top:35px
}
@media(min-width:1450px) {
  .hero {
    gap:70px
  }
  h1 {
    font-size:53px
  }
}
@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 48px)
  }
  .hero {
    gap:30px;
    grid-template-columns:1.1fr 1fr
  }
  h1 {
    font-size:43px
  }
  .hero-visual {
    height:550px
  }
  .phone {
    width:220px
  }
  .floating-quote {
    left:-14px;
    padding:13px;
    gap:9px
  }
  .file-tag {
    margin-left:0
  }
  .app-frame {
    padding-inline:25px
  }
  .workflow {
    gap:18px
  }
  .step-heading h3 {
    font-size:14px
  }
  .pricing {
    gap:60px
  }
  .feature-grid {
    gap:20px
  }
  .feature-grid h3 {
    font-size:19px
  }
  .closing {
    padding:40px
  }
  .closing h2 {
    font-size:29px
  }
}
@media(max-width:800px) {
  .header nav {
    gap:18px
  }
  .hero {
    gap:24px;
    min-height:auto;
    padding-block:55px
  }
  h1 {
    font-size:36px;
    letter-spacing:-1.4px
  }
  .hero-copy .eyebrow {
    font-size:14px;
    letter-spacing:.8px
  }
  .hero-copy .lead {
    font-size:15px
  }
  .hero-actions {
    gap:17px;
    align-items:flex-start;
    flex-direction:column
  }
  .hero-visual {
    height:515px
  }
  .phone {
    width:205px
  }
  .visual-caption {
    font-size:14px;
    top:21px;
    left:20px
  }
  .floating-quote {
    bottom:35px;
    padding:11px
  }
  .floating-quote strong {
    font-size:14px
  }
  .floating-quote small {
    font-size:14px
  }
  .file-tag {
    display:none
  }
  .scope {
    flex-wrap:wrap;
    justify-content:center;
    gap:14px 27px;
    font-size:14px
  }
  .section {
    padding-block:70px
  }
  .section-head {
    gap:20px
  }
  .section-head>p {
    font-size:14px
  }
  .workflow {
    gap:13px
  }
  .step-heading {
    gap:6px;
    align-items:center
  }
  .step-heading h3 {
    font-size:14px
  }
  .step-heading>span {
    width:20px;
    height:20px;
    flex-shrink:0
  }
  .step-heading b {
    display:none
  }
  .app-frame,.quote-frame {
    height:330px
  }
  .app-frame {
    padding:16px 15px 0
  }
  .quote-frame {
    padding:18px 11px 40px
  }

  .step>p {
    font-size:14px
  }
  .feature-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px
  }
  .feature-grid h3 {
    min-height:0
  }
  .pricing {
    gap:35px
  }
  .price-card {
    padding:28px 24px
  }
  .price {
    font-size:56px
  }
  .price>span {
    font-size:14px
  }
  .closing {
    gap:25px;
    padding:32px
  }
  .closing h2 {
    font-size:25px
  }
  .closing .button {
    font-size:14px;
    gap:15px
  }
  .footer {
    gap:20px
  }
  .footer>p {
    display:none
  }
}
@media(max-width:600px) {
  .wrap {
    width:calc(100% - 36px)
  }
  .header {
    height:76px;
    gap:10px
  }
  .brand {
    font-size:23px
  }
  .brand img {
    width:29px;
    height:29px
  }
  .header nav {
    display:none
  }
  .header-action {
    font-size:14px;
    padding:8px 12px;
    gap:17px
  }
  .hero {
    display:flex;
    flex-direction:column;
    padding-block:38px 30px;
    gap:34px;
    align-items:stretch
  }
  .hero-copy {
    padding:0
  }
  .hero-copy .eyebrow {
    font-size:14px;
    letter-spacing:1px;
    margin-bottom:22px
  }
  h1 {
    font-size:clamp(32px,8.8vw,47px);
    line-height:1.1;
    letter-spacing:-1.6px
  }
  .desktop-break {
    display:none
  }
  .hero-copy .lead {
    font-size:15px;
    line-height:1.65;
    margin-top:22px;
    max-width:370px
  }
  .hero-actions {
    flex-direction:row;
    align-items:center;
    gap:21px;
    margin-top:26px
  }
  .hero-actions .button {
    padding:15px 17px;
    min-height:52px;
    font-size:14px;
    gap:22px
  }
  .hero-actions .text-link {
    font-size:14px;
    gap:10px
  }
  .hero-copy .micro {
    font-size:14px;
    margin-top:13px
  }
  .hero-visual {
    height:530px;
    border-radius:20px;
    margin-inline:0
  }
  .phone {
    width:218px;
    margin-top:18px
  }
  .visual-caption {
    top:22px;
    left:20px;
    font-size:14px
  }
  .floating-quote {
    left:13px;
    bottom:39px;
    padding:13px;
    gap:10px;
    border-radius:10px;
    transform:rotate(-3deg)
  }
  .floating-quote strong {
    font-size:14px
  }
  .floating-quote small {
    font-size:14px
  }
  .file-tag {
    display:block;
    font-size:14px;
    margin-left:3px
  }
  .visual-footnote {
    bottom:13px;
    font-size:14px
  }
  .scope {
    padding-block:18px;
    gap:10px 17px;
    font-size:14px;
    justify-content:flex-start
  }
  .scope span {
    gap:6px
  }
  .section {
    padding-block:57px
  }
  .section-head {
    display:block;
    margin-bottom:28px
  }
  .eyebrow {
    font-size:14px;
    letter-spacing:1.3px;
    margin-bottom:18px
  }
  h2 {
    font-size:32px;
    line-height:1.15;
    letter-spacing:-1.2px
  }
  .section-head>p {
    margin-top:18px;
    font-size:14px;
    line-height:1.65
  }
  .section-head>p br {
    display:none
  }
  .scenario-tabs {
    width:100%;
    margin-bottom:26px
  }
  .scenario-tabs button {
    width:50%;
    justify-content:center;
    padding:12px 8px;
    gap:10px
  }
  .scenario-tabs button span {
    font-size:14px
  }
  .workflow {
    grid-template-columns:1fr;
    gap:28px
  }
  .step-heading {
    margin-bottom:13px;
    gap:10px
  }
  .step-heading h3 {
    font-size:16px
  }
  .step-heading>span {
    width:25px;
    height:25px;
    font-size:14px
  }
  .step-heading b {
    display:block;
    font-size:18px;
    transform:rotate(90deg);
    margin-right:4px
  }
  .app-frame {
    height:450px;
    padding:20px 48px 0
  }
  .app-frame img {
    width:245px
  }
  .quote-frame {
    height:auto;
    min-height:340px;
    padding:22px 30px 46px
  }
  .quote-frame img {
    width:100%;
    max-height:none
  }
  .zoom-label {
    height:38px;
    font-size:14px
  }

  .step>p {
    font-size:14px;
    margin-top:12px
  }
  .demo-note {
    font-size:14px;
    margin-top:26px;
    padding-top:17px
  }
  .feature-grid {
    gap:28px 23px
  }
  .feature-grid article {
    padding-top:20px
  }
  .feature-number {
    font-size:14px;
    letter-spacing:.8px;
    margin-bottom:19px
  }
  .feature-grid h3 {
    font-size:19px;
    min-height:46px;
    line-height:1.2;
    margin-bottom:12px
  }
  .feature-grid p {
    font-size:14px;
    line-height:1.65;
    margin-bottom:18px
  }
  .feature-bottom {
    min-height:65px;
    font-size:14px
  }
  .window-sketch svg {
    height:65px
  }
  .material-tags {
    min-height:65px;
    gap:5px
  }
  .material-tags span {
    font-size:14px;
    padding:6px
  }
  .storage-note {
    font-size:14px;
    margin-top:27px;
    padding-top:18px
  }
  .pricing {
    grid-template-columns:1fr;
    gap:30px
  }
  .price-copy .lead {
    font-size:15px;
    margin-top:20px
  }
  .access-note {
    margin-top:20px;
    font-size:14px;
    max-width:none
  }
  .price-card {
    padding:29px 27px
  }
  .trial-tag {
    margin-bottom:23px
  }
  .price {
    font-size:64px
  }
  .price>span {
    font-size:16px
  }
  .price-card ul {
    font-size:14px
  }
  .renewal {
    font-size:14px
  }
  .closing {
    padding:30px 24px;
    display:block;
    border-radius:17px
  }
  .closing h2 {
    font-size:27px;
    letter-spacing:-1px;
    line-height:1.2
  }
  .closing .button {
    margin-top:25px;
    font-size:14px;
    gap:30px
  }
  .closing .eyebrow {
    font-size:14px;
    letter-spacing:1px
  }
  .footer {
    padding-block:30px;
    flex-wrap:wrap;
    gap:16px
  }
  .footer .brand {
    font-size:20px
  }
  .footer>span {
    font-size:14px
  }
  .dialog-toolbar h2 {
    font-size:14px
  }
  dialog {
    padding-inline:12px
  }
  .close-dialog {
    min-width:38px;
    min-height:38px
  }
}
@media(max-width:360px) {
  .wrap {
    width:calc(100% - 28px)
  }
  h1 {
    font-size:32px
  }
  .hero-actions {
    gap:14px
  }
  .hero-actions .button {
    padding-inline:13px;
    gap:14px
  }
  .hero-actions .text-link {
    font-size:14px
  }
  .hero-visual {
    height:500px
  }
  .phone {
    width:205px
  }
  .file-tag {
    display:none
  }
  .floating-quote {
    bottom:35px
  }
  .app-frame {
    padding-inline:30px
  }
  .feature-grid {
    gap:25px 16px
  }
  .feature-grid h3 {
    font-size:17px
  }
  .price-card {
    padding:26px 22px
  }
  .closing h2 {
    font-size:24px
  }
  .footer>span {
    margin-left:0;
    width:100%
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
}
@media(max-width:1100px) {
  .visual-caption {
    display:none
  }
}

/* Читаемая версия: прежняя палитра и компоненты, больше места для продукта. */
body { font-size:16px; line-height:1.6; }
.wrap { width:min(1240px,calc(100% - 64px)); }
h1 { font-size:clamp(38px,3.75vw,54px); line-height:1.1; letter-spacing:-1.8px; }
h2 { font-size:clamp(32px,3.2vw,44px); }
h3 { line-height:1.3; }
.eyebrow,.hero-copy .eyebrow,.closing .eyebrow { font-size:12px; letter-spacing:1.2px; line-height:1.6; }
.lead,.hero-copy .lead,.price-copy .lead { font-size:18px; line-height:1.65; }
.micro,.hero-copy .micro,.access-note,.price-subtitle,.renewal,.storage-note,.demo-note { font-size:14px; line-height:1.65; }
.brand small { font-size:12px; }
.header { min-height:96px; height:auto; padding-block:20px; }
.header nav { font-size:14px; gap:24px; }
.header nav a { display:flex; align-items:center; min-height:44px; }
.header-action { font-size:16px; min-height:48px; gap:16px; padding:10px 16px; }
.button,.hero-actions .button,.closing .button { font-size:16px; min-height:54px; padding:15px 22px; line-height:1.4; gap:20px; }
.text-link,.hero-actions .text-link { font-size:16px; min-height:48px; line-height:1.5; }
.hero { grid-template-columns:1fr 1fr; gap:60px; padding-block:55px; }
.hero-actions { flex-wrap:wrap; gap:14px 24px; align-items:center; flex-direction:row; }
.hero-copy .lead { max-width:480px; }
.hero-visual { height:720px; }
.phone { width:294px; transform:rotate(2deg); border-width:5px; border-radius:23px; margin-top:0; }
.floating-quote { bottom:110px; left:-18px; padding:18px; gap:12px; }
.floating-quote strong { font-size:16px; line-height:1.4; }
.floating-quote small { font-size:14px; line-height:1.5; }
.visual-footnote { font-size:12px; line-height:1.4; bottom:17px; right:20px; }
.scope { font-size:14px; flex-wrap:wrap; justify-content:space-between; gap:15px 20px; }
.section-head { gap:32px; }
.section-head>p { font-size:16px; max-width:350px; }
.scenario-tabs { display:flex; width:fit-content; flex-wrap:wrap; gap:6px; padding:6px; margin-bottom:30px; }
.scenario-tabs button { min-height:52px; padding:12px 22px; font-size:16px; flex:none; width:auto; }
.scenario-tabs button span { font-size:16px; }
.scenario-intro { display:flex; justify-content:space-between; gap:35px; align-items:center; margin-bottom:30px; }
.scenario-intro h3 { font-size:24px; margin-bottom:10px; }
.scenario-intro>div>p { font-size:16px; color:var(--muted); max-width:740px; }
.sample-total { flex-shrink:0; border-left:1px solid var(--line); padding-left:30px; }
.sample-total span { display:block; font-size:14px; color:var(--muted); }
.sample-total strong { display:block; font-size:32px; line-height:1.5; font-weight:500; color:var(--green); white-space:nowrap; }
.workflow { grid-template-columns:1fr 1fr; gap:36px; }
.step-heading { min-height:36px; margin-bottom:18px; gap:12px; }
.step-heading h3 { font-size:18px; line-height:1.4; }
.step-heading>span { width:30px; height:30px; font-size:14px; flex-shrink:0; }
.app-frame,.quote-frame { height:820px; position:relative; padding:24px 24px 60px; display:flex; align-items:flex-start; justify-content:center; }
.app-frame>img { width:330px; border-radius:12px; max-width:100%; }
.quote-frame>img { width:100%; max-height:none; }
.zoom-label { height:48px; font-size:14px; padding:10px 20px; line-height:1.5; }
.app-frame:hover .zoom-label { background:var(--green); color:white; }
.step>p { font-size:16px; line-height:1.65; margin-top:18px; }
.pdf-link { display:inline-flex; align-items:center; gap:18px; margin-top:10px; min-height:48px; font-size:16px; text-decoration:underline; text-underline-offset:4px; }
.demo-note { margin-top:32px; padding-top:22px; }

.feature-grid { gap:30px; }
.feature-number { font-size:12px; line-height:1.5; }
.feature-grid h3 { font-size:23px; min-height:60px; }
.feature-grid p { font-size:16px; line-height:1.65; }
.material-tags span,.feature-bottom { font-size:14px; line-height:1.6; }
.material-tags span { padding:8px 10px; }
.feature-bottom { min-height:80px; }
.storage-note { margin-top:35px; padding-top:22px; }
.pricing { gap:90px; }
.price-card { padding:36px; }
.trial-tag { font-size:14px; }
.price-card h3 { font-size:22px; }
.price-card ul { font-size:16px; line-height:1.6; }
.price>span { font-size:18px; }
.price-card .button { width:100%; }
.renewal { margin-top:20px; }
.closing { padding:48px; gap:35px; }
.closing h2 { font-size:32px; }
.footer,.footer>span { font-size:14px; line-height:1.5; }
.footer { flex-wrap:wrap; gap:20px 30px; }
.dialog-toolbar h2 { font-size:18px; line-height:1.4; }
.close-dialog { min-width:48px; min-height:48px; font-size:18px; flex-shrink:0; }
dialog>.text-link { font-size:16px; }
html:not(.js) [role=tabpanel][hidden] { display:block!important; margin-top:50px; }
@media(max-width:1100px) {
  .hero { gap:35px; }
  .hero-visual { height:670px; }
  .phone { width:270px; }
  .hero-copy .lead { font-size:17px; }
  .floating-quote { left:12px; right:12px; bottom:110px; }
  .workflow { gap:25px; }
  .app-frame,.quote-frame { height:700px; padding-inline:18px; }
  .app-frame>img { width:280px; }
  .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:35px; }
  .feature-grid h3 { min-height:0; }

  .pricing { gap:45px; }
  .closing { flex-direction:column; align-items:flex-start; }
}
@media(max-width:800px) {
  .wrap { width:calc(100% - 40px); }
  .header nav { display:none; }
  .hero { gap:25px; }
  .hero h1 { font-size:38px; letter-spacing:-1.4px; }
  .hero-actions { flex-direction:column; align-items:flex-start; }
  .hero-visual { height:620px; }
  .phone { width:246px; }
  .floating-quote { padding:14px; gap:9px; }
  .floating-quote strong { font-size:16px; }
  .floating-quote small { font-size:14px; }
  .floating-quote .file-icon { display:none; }
  .visual-footnote { text-align:center; left:14px; right:14px; }
  .section-head { display:block; }
  .section-head>p { margin-top:20px; max-width:none; }
  .scenario-intro { align-items:flex-start; gap:25px; }
  .scenario-intro h3 { font-size:22px; }
  .sample-total { padding-left:20px; }
  .sample-total strong { font-size:28px; }
  .workflow { grid-template-columns:1fr; }
  .app-frame,.quote-frame { height:auto; padding:20px 20px 65px; }
  .app-frame>img { width:330px; max-width:100%; }

  .price-card { padding:28px 24px; }
  .pricing { gap:30px; }
}
@media(max-width:600px) {
  .wrap { width:calc(100% - 32px); }
  .header { min-height:80px; padding-block:16px; gap:12px; }
  .header-action { font-size:14px; gap:12px; padding:10px 12px; }
  .brand { font-size:23px; }
  .brand small { font-size:12px; }
  .hero { display:flex; padding-block:34px 35px; gap:32px; }
  .hero h1 { font-size:clamp(34px,9.2vw,46px); line-height:1.12; letter-spacing:-1.5px; }
  .hero-copy .eyebrow { font-size:12px; letter-spacing:.6px; margin-bottom:20px; }
  .hero-copy .lead { font-size:17px; margin-top:24px; }
  .hero-actions { flex-direction:column; gap:10px; align-items:stretch; margin-top:27px; }
  .hero-actions .button { width:100%; }
  .hero-actions .text-link { justify-content:center; }
  .hero-copy .micro { font-size:14px; margin-top:12px; }
  .hero-visual { height:700px; }
  .phone { width:280px; max-width:calc(100% - 28px); margin-top:0; }
  .floating-quote { left:12px; right:12px; bottom:110px; padding:16px; }
  .floating-quote .file-icon { display:grid; }
  .floating-quote small { font-size:14px; }
  .visual-footnote { font-size:12px; bottom:17px; }
  .scope { font-size:14px; gap:12px 18px; justify-content:flex-start; padding-block:22px; }
  .section { padding-block:60px; }
  .section-head { margin-bottom:26px; }
  .section-head>p { font-size:16px; }
  .scenario-tabs { display:grid; grid-template-columns:1fr 1fr; width:100%; gap:6px; }
  .scenario-tabs button { padding:11px 8px; min-height:48px; font-size:16px; width:100%; }
  .scenario-tabs button:last-child { grid-column:1/-1; }
  .scenario-tabs button span { font-size:16px; }
  .scenario-intro { flex-direction:column; gap:20px; margin-bottom:26px; }
  .scenario-intro h3 { font-size:23px; margin-bottom:12px; }
  .scenario-intro>div>p { font-size:16px; }
  .sample-total { display:flex; justify-content:space-between; align-items:center; width:100%; padding:15px 0; border-left:0; border-block:1px solid var(--line); gap:18px; }
  .sample-total span { font-size:14px; max-width:100px; }
  .sample-total strong { font-size:29px; }
  .workflow { grid-template-columns:1fr; gap:28px; }
  .step-heading h3 { font-size:18px; }
  .step-heading>span { width:28px; height:28px; font-size:14px; }
  .app-frame { height:auto; padding:12px 12px 60px; }
  .app-frame>img { width:100%; border-radius:10px; }
  .quote-frame { height:auto; min-height:0; padding:12px 12px 60px; }
  .quote-frame>img { width:100%; }
  .zoom-label { height:48px; font-size:14px; padding-inline:15px; }
  .step>p { font-size:16px; margin-top:16px; }
  .demo-note { font-size:14px; padding-top:20px; margin-top:28px; }

  .feature-grid { grid-template-columns:1fr; gap:28px; }
  .feature-number { font-size:12px; margin-bottom:16px; }
  .feature-grid h3 { font-size:24px; min-height:0; margin-bottom:12px; }
  .feature-grid p { font-size:16px; margin-bottom:18px; }
  .material-tags span,.feature-bottom { font-size:14px; }
  .window-sketch svg { height:90px; width:260px; max-width:100%; }
  .storage-note { font-size:14px; }
  .pricing { grid-template-columns:1fr; gap:28px; }
  .price-copy .lead { font-size:17px; }
  .access-note { font-size:14px; }
  .price-card { padding:28px 24px; }
  .trial-tag { font-size:14px; }
  .price { font-size:64px; }
  .price>span { font-size:18px; }
  .price-subtitle { font-size:14px; }
  .price-card ul { font-size:16px; line-height:1.6; }
  .renewal { font-size:14px; }
  .closing { display:flex; padding:30px 24px; gap:25px; }
  .closing h2 { font-size:29px; }
  .closing .eyebrow { font-size:12px; }
  .closing .button { margin:0; width:100%; font-size:16px; padding-inline:15px; }
  .footer { gap:20px; padding-block:30px; }
  .footer>span { margin:0; width:100%; font-size:14px; }
  .dialog-toolbar h2 { font-size:16px; }
}
@media(max-width:360px) {
  .hero-visual { height:635px; }
  .phone { width:252px; }
  .floating-quote { padding:14px; }
  .floating-quote .file-icon { display:none; }
  .price-card { padding:26px 20px; }
  .closing { padding:28px 20px; }
}

/* КП и исторические ответы: отдельные источники в общей композиции. */
.conversation { display:block; padding-top:0; text-align:center; }
.conversation-caption { margin:28px auto 0; max-width:850px; font-size:14px; line-height:1.6; color:var(--muted); }
.conversation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:36px; }
.conversation-card { padding:24px; border:1px solid var(--line); border-radius:24px; background:white; text-align:left; box-shadow:0 12px 32px #193c2910; }
.conversation-card-heading { display:flex; align-items:center; gap:12px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.conversation-card-heading h3 { font-size:22px; line-height:1.25; margin:0 0 4px; }
.conversation-card-heading p { font-size:14px; line-height:1.5; color:var(--muted); margin:0; }
.conversation-icon { display:grid; place-items:center; width:46px; height:46px; flex-shrink:0; border-radius:12px; font-size:30px; color:var(--green); background:var(--sage); }
.conversation-card-body { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; gap:20px; margin-top:20px; }
.conversation-document { grid-row:1 / 3; min-width:0; }
.conversation-shot { display:block; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:white; }
.conversation-shot>img { display:block; width:100%; height:auto; }
.conversation-open { display:block; padding:12px 10px; min-height:44px; border-top:1px solid var(--line); font-size:14px; text-align:center; color:var(--green); background:#f9faf6; }
.conversation-shot:hover .conversation-open { background:var(--green); color:white; }
.conversation-pdf { display:flex; align-items:center; min-height:44px; font-size:14px; color:var(--green); }
.conversation-role { margin:0 0 12px; font-size:14px; line-height:1.5; font-weight:600; color:var(--green); }
.conversation-description { margin:0 0 10px; font-size:16px; line-height:1.5; color:var(--muted); }
.conversation-total { display:block; font-size:32px; line-height:1.2; color:var(--green); white-space:nowrap; }
.conversation-response { border-top:1px solid var(--line); padding-top:20px; }
.conversation-response .conversation-role { color:var(--muted); }
.conversation-response blockquote { margin:0; padding:18px; border-radius:18px; background:#f1f4f0; font-size:19px; line-height:1.55; }
#conversation-original { font-size:14px; color:var(--green); padding-block:12px; }
@media(max-width:1000px) {
  .conversation-grid { grid-template-columns:minmax(0,680px); justify-content:center; }
}
@media(max-width:600px) {
  .conversation-grid { gap:20px; margin-top:26px; }
  .conversation-card { padding:18px; border-radius:20px; }
  .conversation-card-heading h3 { font-size:20px; }
  .conversation-icon { width:38px; height:38px; }
  .conversation-card-body { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:16px; }
  .conversation-document { grid-row:1; }
  .conversation-response { grid-column:1 / -1; padding-top:16px; }
  .conversation-total { font-size:27px; }
  .conversation-response blockquote { font-size:18px; padding:16px; }
  .conversation-description { font-size:14px; }
}

/* Отдельный просмотр переписок: масштаб и прокрутка оригинала. */
#conversation-preview { width:min(1000px,calc(100% - 24px)); height:90dvh; max-height:1000px; padding:0; overflow:hidden; text-align:left; }
#conversation-preview[open] { display:flex; flex-direction:column; }
.conversation-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--bg); flex-shrink:0; }
.conversation-toolbar h2 { font-size:18px; letter-spacing:0; line-height:1.4; }
.conversation-controls { display:flex; align-items:center; gap:8px; margin-left:auto; }
.conversation-controls button { width:44px; height:44px; border:1px solid var(--line); border-radius:6px; background:white; color:var(--ink); font-size:22px; }
.conversation-controls button:disabled { opacity:.45; }
#conversation-scale { min-width:50px; font-size:14px; text-align:center; }
.conversation-viewport { overflow:auto; min-height:0; flex:1; overscroll-behavior:contain; background:var(--sage); }
#conversation-full-image { display:block; width:100%; max-width:none; height:auto; margin-inline:auto; cursor:zoom-in; }
#conversation-preview[data-zoomed] #conversation-full-image { cursor:zoom-out; }
@media(max-width:600px) {
  .conversation-toolbar { padding:12px; gap:10px; }
  .conversation-toolbar h2 { font-size:16px; flex-basis:100%; }
}