/* Public marketing presentation. Existing calculator and invoice styles remain in styles.css. */
:root {
  --paper:#fbfcf9;
  --ink:#183e32;
  --green:#205b43;
  --muted:#53645b;
  --lime:#dcf19b;
  --line:#dce3da;
  --sans:'DM Sans',Arial,sans-serif
}
html {
  scroll-padding-top:100px
}
body.marketing {
  font-family:var(--sans);
  line-height:1.6
}
.marketing h1,.marketing h2,.marketing h3 {
  font-family:var(--sans);
  font-weight:550
}
.marketing h1 {
  font-size:clamp(42px,4.6vw,66px);
  letter-spacing:-2.8px;
  line-height:1.08;
  margin:0 0 26px;
  width:auto
}
.marketing h2 {
  font-size:clamp(30px,3vw,42px);
  letter-spacing:-1.5px;
  line-height:1.17;
  margin:0 0 22px
}
.marketing h3 {
  font-size:23px;
  letter-spacing:-.6px;
  line-height:1.3;
  margin:0 0 16px
}
.marketing p {
  line-height:1.8
}
.marketing em {
  font-family:Georgia,serif;
  font-weight:400;
  color:var(--green)
}
.marketing .section-wrap {
  width:min(1240px,calc(100% - 96px))
}
.marketing .site-header {
  width:min(1440px,100%);
  padding:24px 48px;
  gap:35px
}
.marketing .brand {
  font-size:26px;
  font-weight:650;
  letter-spacing:-1.1px
}
.marketing .main-nav {
  display:flex;
  gap:32px;
  margin-left:auto;
  font-size:13px;
  font-weight:550
}
.marketing .main-nav a {
  padding:10px 0
}
.marketing .main-nav a:hover {
  color:var(--green);
  text-decoration:underline;
  text-underline-offset:7px
}
.marketing .header-actions {
  display:flex;
  align-items:center;
  gap:26px;
  font-size:13px
}
.marketing .button {
  border-radius:7px;
  padding:15px 21px;
  font-size:13px;
  gap:24px;
  min-height:48px;
  font-weight:600;
  transition:background .18s,transform .18s
}
.marketing .button-small {
  padding:11px 17px;
  min-height:42px;
  font-size:12px;
  gap:16px
}
.marketing .button:hover {
  transform:translateY(-1px)
}
.marketing .button span {
  font-size:18px
}
.marketing .button-lime {
  background:var(--lime);
  color:var(--ink)
}
.marketing .button-lime:hover {
  background:#e9f6bf
}
.marketing .eyebrow {
  font-size:10px;
  letter-spacing:1.65px;
  line-height:1.8;
  font-weight:650;
  margin:0 0 20px;
  justify-content:flex-start
}
.marketing .status-dot {
  box-shadow:none;
  width:6px;
  height:6px
}
.marketing .hero {
  display:grid;
  grid-template-columns:.95fr 1.12fr;
  gap:44px;
  align-items:center;
  min-height:660px;
  padding-block:65px 72px;
  text-align:left
}
.marketing .hero-copy {
  padding:0
}
.marketing .hero h1 {
  font-size:clamp(44px,4.55vw,66px);
  margin-inline:0
}
.marketing .hero-description {
  max-width:440px;
  font-size:15px;
  margin:0 0 28px;
  line-height:1.85;
  color:var(--muted)
}
.marketing .hero-actions {
  display:flex;
  gap:22px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-start;
  margin-top:26px
}
.marketing .text-button,.marketing .text-link {
  font-size:13px;
  font-weight:600;
  line-height:1.6;
  letter-spacing:0;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid #a6b9a6;
  padding-bottom:4px
}
.marketing .text-link:hover,.marketing .text-button:hover {
  color:#287650;
  border-color:var(--green)
}
.marketing .hero-note {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin:22px 0 0
}
.workspace-figure {
  margin:0;
  padding:40px 0 0;
  position:relative;
  min-width:0
}
.workspace-figure:before {
  content:'';
  position:absolute;
  inset:0 -20px 32px 20px;
  background:#eaf0e4;
  border-radius:150px 15px 15px 15px;
  z-index:-1
}
.workspace {
  background:white;
  box-shadow:0 18px 55px #173a2510;
  border:1px solid #d3ded4;
  border-radius:11px;
  overflow:hidden;
  transform:rotate(-1deg)
}
.workspace-top {
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid #e5eae3;
  padding:15px 18px;
  font-size:12px
}
.workspace-mark {
  font-size:22px;
  font-weight:700;
  color:var(--green);
  line-height:1
}
.sample-chip {
  margin-left:auto;
  font-size:9px;
  color:#60705e;
  background:#f1f4ee;
  padding:4px 7px;
  border-radius:4px
}
.workspace-body {
  display:flex;
  min-height:340px
}
.workspace-rail {
  flex:0 0 98px;
  background:#f6f8f3;
  padding:25px 8px;
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:10px;
  color:#52664f
}
.workspace-rail span {
  padding:6px 8px;
  border-radius:4px
}
.workspace-rail .rail-active {
  color:var(--green);
  background:#e7efdf;
  font-weight:700
}
.workspace-content {
  padding:24px 19px;
  flex:1;
  min-width:0
}
.workspace-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.tiny-label {
  font-size:7px;
  letter-spacing:1.3px;
  color:var(--muted);
  font-weight:600
}
.marketing .workspace-title h2 {
  font-size:21px;
  letter-spacing:-.7px;
  margin:7px 0 20px
}
.owner-chip {
  font-size:8px;
  border:1px solid var(--line);
  padding:4px 8px;
  border-radius:30px;
  align-self:flex-start;
  margin-top:5px
}
.view-summary {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:25px
}
.view-summary>div {
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #e3e9df;
  border-radius:5px;
  padding:12px 9px
}
.summary-icon {
  color:var(--green);
  font-size:9px;
  background:#edf3e7;
  padding:7px 5px;
  border-radius:4px
}
.view-summary strong {
  font-size:10px;
  display:block;
  font-weight:600
}
.view-summary small {
  display:block;
  font-size:8px;
  color:var(--muted);
  margin-top:3px
}
.workspace-table table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  white-space:nowrap
}
.workspace-table caption {
  text-align:left;
  font-size:11px;
  font-weight:650;
  margin-bottom:12px
}
.workspace-table th {
  font-size:8px;
  color:#59675a;
  font-weight:500;
  padding:6px 6px;
  background:#f6f8f3
}
.workspace-table td {
  font-size:9px;
  padding:13px 6px;
  border-bottom:1px solid #e9ece6
}
.workspace-table strong {
  font-size:10px;
  font-weight:600;
  display:block
}
.workspace-table small {
  font-size:8px;
  color:var(--muted);
  display:block;
  margin-top:3px
}
.badge {
  padding:4px 6px;
  border-radius:4px;
  font-size:8px;
  display:inline-block
}
.badge.amber {
  background:#fff1d5;
  color:#7b5816
}
.badge.green {
  background:#e5f1df;
  color:#355d29
}
.badge.blue {
  background:#eaf0f7;
  color:#365a7e
}
.workspace-bottom {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:8px;
  color:var(--muted);
  padding-top:17px
}
.live-dot {
  height:5px;
  width:5px;
  border-radius:50%;
  background:#52916b
}
.workspace-figure figcaption {
  font-size:10px;
  color:var(--muted);
  text-align:center;
  padding-top:24px
}
.audience-strip {
  border-block:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:24px
}
.audience-strip>span {
  font-size:8px;
  letter-spacing:1.2px;
  font-weight:600;
  max-width:130px;
  line-height:1.7
}
.audience-strip p {
  font-size:13px;
  margin:0;
  color:#52644f;
  font-weight:550
}
.audience-strip i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#b7c7b2
}
.workflow-section,.product-section,.solutions-section,.team-section {
  padding-block:90px
}
.marketing .section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:44px
}
.marketing .section-heading h2 {
  margin:0
}
.marketing .section-heading>p {
  font-size:13px;
  color:var(--muted);
  margin:0 0 2px;
  max-width:270px;
  line-height:1.9
}
.operation-flow {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
  padding:0;
  margin:0
}
.operation-flow li {
  border-top:2px solid #b4c6ac;
  padding:21px 0 12px;
  position:relative
}
.operation-flow li:after {
  content:'→';
  position:absolute;
  right:0;
  top:20px;
  color:#6b8560;
  font-size:16px
}
.operation-flow li:last-child:after {
  display:none
}
.operation-flow span {
  font-size:9px;
  color:#5d7454;
  letter-spacing:1px;
  display:block;
  margin-bottom:17px
}
.operation-flow strong {
  font-size:16px;
  font-weight:600;
  display:block
}
.operation-flow p {
  font-size:11px;
  color:var(--muted);
  margin:5px 0 0
}
.marketing .section-note {
  font-size:11px;
  color:var(--muted);
  margin:25px 0 0;
  line-height:1.8;
  max-width:850px
}
.section-note a {
  text-decoration:underline
}
.product-section {
  padding-top:0
}
.product-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.product-card {
  padding:32px 32px 28px;
  background:white;
  border:1px solid var(--line);
  border-radius:8px;
  display:flex;
  flex-direction:column
}
.card-top {
  display:flex;
  gap:15px;
  align-items:center;
  margin-bottom:45px;
  font-size:10px;
  font-weight:600;
  color:#556b4f
}
.card-top>span:first-child {
  font-size:9px;
  border:1px solid #d2deca;
  border-radius:5px;
  padding:6px
}
.product-card p {
  font-size:13px;
  color:var(--muted);
  max-width:425px;
  margin:0 0 25px
}
.product-card .text-link {
  align-self:flex-start;
  margin-top:auto
}
.packing-band {
  display:flex;
  align-items:center;
  gap:28px;
  background:#edf2e6;
  padding:25px 30px;
  margin-top:20px;
  border-radius:8px
}
.packing-symbol {
  font-size:26px;
  white-space:nowrap;
  color:#3d6948
}
.marketing .packing-band h3 {
  font-size:17px;
  letter-spacing:-.3px;
  margin:0 0 5px
}
.packing-band p {
  font-size:11px;
  color:var(--muted);
  margin:0
}
.packing-band .text-link {
  margin-left:auto;
  white-space:nowrap;
  font-size:11px
}
.walkthrough-section {
  background:#edf2e8;
  border-block:1px solid #e2e9dc
}
.walkthrough-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:80px;
  padding-block:65px
}
.walkthrough-layout>div>p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  max-width:400px
}
.plain-checks {
  padding:0;
  list-style:none;
  margin:22px 0 28px
}
.plain-checks li {
  font-size:12px;
  margin:12px 0;
  color:#3b5442
}
.plain-checks li:before {
  content:'✓';
  margin-right:12px;
  color:var(--green)
}
.marketing .walkthrough-layout .small-note {
  font-size:10px;
  line-height:1.8;
  margin-top:20px;
  max-width:340px
}
.screen-pair {
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:center;
  min-width:0
}
.screen-pair figure {
  margin:0;
  min-width:0;
  width:210px
}
.screen-pair figure:nth-child(2) {
  padding-top:50px
}
.screen-pair img {
  width:100%;
  height:auto;
  border-radius:18px;
  box-shadow:0 15px 35px #183b2420;
  border:1px solid #d4ddcc
}
.screen-pair figcaption {
  text-align:center;
  font-size:10px;
  margin-top:15px;
  color:#486046
}
.solution-row {
  display:grid;
  grid-template-columns:35px 1fr 1fr 24px;
  align-items:center;
  gap:25px;
  padding:30px 0;
  border-bottom:1px solid var(--line);
  transition:padding .18s
}
.solution-row:hover {
  padding-left:10px;
  background:#f3f6ee
}
.solution-row:first-of-type {
  border-top:1px solid var(--line)
}
.solution-number {
  font-size:10px;
  color:#4f6846
}
.marketing .solution-row h3 {
  font-size:22px;
  letter-spacing:-.5px;
  margin:0
}
.solution-row p {
  font-size:12px;
  color:var(--muted);
  margin:0;
  max-width:300px
}
.team-section {
  padding-top:0
}
.role-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px
}
.role-initial {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:43px;
  height:43px;
  border-radius:50%;
  background:#e5eddf;
  color:#365e3e;
  font-size:15px;
  font-weight:600;
  margin-bottom:23px
}
.role-grid article:nth-child(2) .role-initial {
  background:#edeada;
  color:#756844
}
.role-grid article:nth-child(3) .role-initial {
  background:#e3eaf1;
  color:#3a5b77
}
.role-grid article:nth-child(4) .role-initial {
  background:#f0e5dc;
  color:#7e5a40
}
.marketing .role-grid h3 {
  font-size:18px;
  margin-bottom:13px
}
.role-grid p {
  font-size:12px;
  color:var(--muted);
  line-height:1.85;
  margin:0
}
.marketing .faq-section {
  display:grid;
  grid-template-columns:1fr 1.65fr;
  gap:80px;
  padding-bottom:85px
}
.marketing details {
  border-bottom:1px solid var(--line)
}
.marketing details:first-child {
  border-top:1px solid var(--line)
}
.marketing summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  cursor:pointer;
  font-size:14px;
  font-weight:550;
  line-height:1.6;
  padding:22px 0;
  list-style:none
}
.marketing summary::-webkit-details-marker {
  display:none
}
.marketing summary span {
  font-size:20px;
  font-weight:400;
  flex-shrink:0
}
.marketing details[open] summary span {
  transform:rotate(45deg)
}
.marketing details p {
  font-size:13px;
  color:var(--muted);
  margin:0 32px 22px 0;
  line-height:1.9
}
.marketing details p a {
  text-decoration:underline;
  text-underline-offset:3px
}
.marketing .closing-section {
  background:#1c4937;
  color:white;
  border-radius:12px;
  padding:48px 52px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
  text-align:left
}
.marketing .closing-section h2 {
  font-size:34px;
  letter-spacing:-1.2px;
  margin:0 0 10px
}
.marketing .closing-section .eyebrow {
  color:#d4e2c8;
  justify-content:flex-start;
  font-size:8px;
  margin-bottom:17px
}
.marketing .closing-section p:not(.eyebrow) {
  font-size:12px;
  color:#d4e2c8;
  margin:0
}
.marketing .closing-section .button {
  flex-shrink:0
}
.marketing footer {
  padding-block:64px 28px
}
.marketing .footer-content {
  grid-template-columns:1.5fr 1fr 1.2fr 1fr;
  gap:40px;
  padding-bottom:42px
}
.marketing .footer-intro p {
  font-size:12px;
  max-width:230px;
  line-height:1.8;
  margin:18px 0
}
.marketing .footer-intro .text-link {
  font-size:11px
}
.marketing .footer-nav h2 {
  font-size:11px;
  letter-spacing:0;
  font-weight:650;
  margin-bottom:20px
}
.marketing .footer-nav ul {
  gap:11px
}
.marketing .footer-nav a {
  font-size:11px;
  color:var(--muted)
}
.marketing .footer-bottom {
  font-size:10px;
  color:var(--muted);
  gap:20px
}
.marketing .feature-page {
  padding-block:28px 40px
}
.marketing .breadcrumbs {
  font-size:11px;
  margin-bottom:60px;
  line-height:1.8
}
.marketing .feature-hero {
  grid-template-columns:1.4fr 1fr;
  gap:70px;
  margin-bottom:70px
}
.marketing .feature-hero h1 {
  font-size:clamp(40px,4.2vw,60px);
  line-height:1.13;
  letter-spacing:-2px
}
.marketing .feature-intro {
  font-size:16px;
  color:var(--muted);
  line-height:1.85;
  margin-bottom:27px;
  max-width:620px
}
.marketing .feature-hero figure {
  padding:20px 15px;
  background:#edf2e8;
  border:1px solid #e0e8d8;
  border-radius:15px
}
.marketing .feature-hero img {
  width:230px;
  max-width:100%;
  height:auto;
  border-radius:20px
}
.marketing .feature-hero figcaption {
  font-size:10px;
  line-height:1.8;
  color:var(--muted);
  margin-top:15px
}
.marketing .feature-body {
  max-width:800px
}
.marketing .feature-body section {
  margin-bottom:55px
}
.marketing .feature-body h2 {
  font-size:29px;
  letter-spacing:-.9px
}
.marketing .feature-body p {
  font-size:15px;
  line-height:1.95
}
.marketing .feature-body p a {
  text-decoration:underline;
  text-underline-offset:3px
}
.marketing .feature-body .eyebrow {
  font-size:9px;
  margin-bottom:12px;
  color:#5a7454
}
.marketing .feature-cta,.regional-note {
  padding:30px;
  background:#edf2e8;
  border-radius:8px
}
.marketing .related-links {
  font-size:14px;
  padding-left:20px
}
.marketing .text-hero {
  grid-template-columns:1fr
}
.marketing .tool-cards {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.marketing .tool-card h2 {
  font-size:27px
}
.marketing .tool-card .eyebrow {
  font-size:9px
}
.setup-hero {
  max-width:850px;
  padding-bottom:60px
}
.setup-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:65px
}
.setup-card {
  padding:30px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff
}
.marketing .setup-card h2 {
  font-size:25px;
  letter-spacing:-.6px
}
.setup-card p {
  font-size:14px;
  color:var(--muted)
}
.setup-card a:not(.text-link) {
  text-decoration:underline;
  text-underline-offset:3px
}
.tour-page {
  padding:25px 0 70px
}
.tour-page-heading {
  max-width:740px;
  margin-bottom:55px
}
.tour-page-heading>p:not(.eyebrow) {
  font-size:15px;
  color:var(--muted);
  max-width:640px
}
.marketing .tour-page-heading .tour-disclosure {
  font-size:11px;
  border-left:2px solid #afc39d;
  padding:10px 16px;
  line-height:1.85;
  max-width:600px
}
.marketing .tour-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:start;
  padding:35px 45px;
  background:#edf2e8;
  border-radius:12px
}
.marketing .tour-tab {
  display:flex;
  align-items:center;
  gap:18px;
  width:100%;
  padding:21px 8px;
  border:0;
  border-bottom:1px solid #cfdbc6;
  background:transparent;
  text-align:left;
  line-height:1.6;
  border-radius:0;
  color:var(--ink)
}
.marketing .tour-tab.selected,.marketing .tour-tab[aria-selected=true] {
  background:#dce8d1;
  border-radius:6px;
  padding-inline:14px
}
.tour-tab .tour-index {
  font-size:10px;
  color:#49623d
}
.tour-tab>span:nth-child(2) {
  flex:1
}
.marketing .tour-tab strong {
  font-size:14px;
  display:block
}
.marketing .tour-tab small {
  font-size:11px;
  display:block;
  color:#52694b;
  line-height:1.8
}
.marketing .tour-context {
  margin-top:35px
}
.marketing .tour-context h2 {
  font-size:29px
}
.marketing .tour-context p {
  font-size:13px;
  color:var(--muted)
}
.tour-screen {
  margin:0 auto;
  text-align:center
}
.tour-screen img {
  width:270px;
  height:auto;
  margin:auto;
  border-radius:23px;
  border:1px solid #d1dbc8;
  box-shadow:0 12px 35px #203c2d15
}
.tour-screen figcaption {
  font-size:10px;
  line-height:1.9;
  color:var(--muted);
  padding-top:16px
}
.detail-toggle {
  display:block;
  margin:20px auto 0;
  background:#fff;
  border:1px solid #aabc9d;
  border-radius:5px;
  padding:11px 18px;
  font-size:12px;
  color:var(--ink)
}
.tour-followup {
  margin-top:65px
}
.tour-followup h2 {
  font-size:30px
}
.nojs-tour {
  margin-block:30px
}
.nojs-tour a {
  text-decoration:underline
}
.marketing :is(a,button,summary,[tabindex]):focus-visible {
  outline:3px solid #347846;
  outline-offset:5px
}
.marketing .skip-link:focus {
  z-index:1000
}
.marketing .mobile-nav {
  box-shadow:0 12px 24px #1c392518
}
.marketing [hidden] {
  display:none!important
}
@media(min-width:1450px) {
  .marketing .hero {
    min-height:710px
  }
  .workspace-body {
    min-height:365px
  }
  .workspace-content {
    padding-block:30px
  }
  .workspace-table td {
    padding-block:15px
  }
}
@media(max-width:1150px) {
  .marketing .section-wrap {
    width:calc(100% - 64px)
  }
  .marketing .site-header {
    padding-inline:32px;
    gap:25px
  }
  .marketing .main-nav {
    gap:22px
  }
  .marketing .header-actions {
    gap:20px
  }
  .marketing .hero {
    gap:24px
  }
  .workspace-rail {
    flex-basis:75px;
    font-size:9px
  }
  .workspace-content {
    padding:20px 12px
  }
  .workspace-table td {
    font-size:8px;
    padding-inline:3px
  }
  .workspace-table strong {
    font-size:9px
  }
  .workspace-table small {
    font-size:7px
  }
  .badge {
    font-size:7px
  }
  .workspace-figure:before {
    right:-10px
  }
  .view-summary>div {
    gap:5px;
    padding:10px 6px
  }
  .view-summary strong {
    font-size:9px
  }
  .view-summary small {
    font-size:7px
  }
  .marketing .hero-actions {
    gap:18px
  }
  .marketing .hero-actions .button {
    gap:14px
  }
  .marketing .hero-actions .text-button {
    font-size:12px
  }
  .walkthrough-layout {
    gap:40px
  }
  .marketing .footer-content {
    gap:25px
  }
  .packing-band {
    gap:20px
  }
  .packing-symbol {
    display:none
  }
  .marketing .tour-layout {
    gap:45px;
    padding:30px
  }
}
@media(max-width:900px) {
  .marketing .site-header {
    gap:20px
  }
  .marketing .main-nav {
    gap:18px;
    font-size:12px
  }
  .marketing .header-actions {
    gap:18px
  }
  .marketing .header-actions .button {
    font-size:11px;
    gap:12px
  }
  .marketing .hero {
    grid-template-columns:1fr 1fr;
    gap:25px;
    min-height:600px
  }
  .marketing .hero h1 {
    font-size:44px;
    letter-spacing:-2px
  }
  .marketing .hero-description {
    font-size:13px
  }
  .marketing .hero .hero-actions {
    align-items:flex-start;
    flex-direction:column;
    gap:17px
  }
  .workspace-rail {
    display:none
  }
  .workspace-content {
    padding:24px 15px
  }
  .workspace-body {
    min-height:340px
  }
  .workspace-title {
    gap:8px
  }
  .marketing .workspace-title h2 {
    font-size:21px
  }
  .sample-chip {
    font-size:8px
  }
  .workspace-top {
    padding-inline:15px
  }
  .audience-strip {
    gap:15px
  }
  .audience-strip p {
    font-size:11px
  }
  .audience-strip>span {
    font-size:7px;
    max-width:110px
  }
  .operation-flow {
    gap:12px
  }
  .operation-flow strong {
    font-size:14px
  }
  .operation-flow p {
    font-size:10px
  }
  .marketing .section-heading>p {
    font-size:12px
  }
  .packing-band .text-link {
    white-space:normal;
    min-width:140px
  }
  .role-grid {
    grid-template-columns:1fr 1fr;
    gap:35px 45px
  }
  .marketing .faq-section {
    gap:40px;
    grid-template-columns:1fr 1.5fr
  }
  .marketing .footer-content {
    grid-template-columns:1.3fr 1fr 1.2fr
  }
  .marketing .footer-intro {
    grid-column:1/-1
  }
  .marketing .footer-intro p {
    max-width:400px
  }
  .marketing .feature-hero {
    gap:40px;
    grid-template-columns:1.25fr 1fr
  }
  .marketing .feature-hero h1 {
    font-size:43px
  }
  .marketing .feature-intro {
    font-size:15px
  }
  .marketing .tour-layout {
    gap:30px
  }
  .tour-screen img {
    width:240px
  }
}
@media(max-width:760px) {
  .marketing .section-wrap {
    width:calc(100% - 40px)
  }
  .marketing .site-header {
    padding:20px;
    flex-wrap:nowrap;
    gap:20px
  }
  .marketing .brand {
    font-size:24px
  }
  .marketing .main-nav {
    display:none
  }
  .marketing .header-actions {
    margin-left:auto
  }
  .marketing .sign-in {
    display:none
  }
  .marketing .menu-toggle:not([hidden]) {
    display:flex;
    flex-shrink:0;
    border:0;
    background:transparent;
    width:28px;
    height:35px;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    padding:3px
  }
  .marketing .menu-toggle span {
    display:block;
    width:22px;
    height:2px;
    background:var(--ink)
  }
  .marketing .mobile-nav:not([hidden]) {
    display:grid;
    top:76px;
    left:20px;
    right:20px;
    background:var(--paper);
    padding:15px;
    border:1px solid var(--line);
    border-radius:8px
  }
  .marketing .mobile-nav a {
    padding:11px 8px;
    font-size:14px
  }
  .marketing .hero {
    grid-template-columns:1fr;
    min-height:auto;
    padding-top:45px;
    padding-bottom:35px;
    gap:30px;
    text-align:left
  }
  .marketing .hero h1 {
    font-size:clamp(43px,7.8vw,60px);
    letter-spacing:-2.3px
  }
  .marketing .hero-description {
    font-size:15px;
    max-width:520px
  }
  .marketing .hero .hero-actions {
    flex-direction:row;
    align-items:center;
    gap:22px
  }
  .marketing .hero-note {
    font-size:10px
  }
  .workspace-figure {
    width:min(550px,100%);
    margin:0 auto;
    padding-top:20px
  }
  .workspace-figure:before {
    inset:0 -5px 32px 20px
  }
  .workspace-body {
    min-height:325px
  }
  .workspace-rail {
    display:flex;
    flex-basis:95px;
    font-size:10px
  }
  .workspace-content {
    padding:24px 18px
  }
  .workspace-table strong {
    font-size:10px
  }
  .workspace-table small {
    font-size:8px
  }
  .workspace-table td {
    font-size:9px;
    padding-block:12px
  }
  .badge {
    font-size:8px
  }
  .marketing .workspace-title h2 {
    font-size:22px
  }
  .view-summary strong {
    font-size:10px
  }
  .view-summary small {
    font-size:8px
  }
  .audience-strip {
    display:flex;
    justify-content:flex-start;
    flex-wrap:wrap;
    padding-block:22px;
    gap:10px 20px
  }
  .audience-strip>span {
    max-width:none;
    width:100%;
    font-size:8px
  }
  .audience-strip p {
    font-size:10px
  }
  .audience-strip i {
    display:none
  }
  .workflow-section,.product-section,.solutions-section,.team-section {
    padding-block:60px
  }
  .product-section,.team-section {
    padding-top:0
  }
  .marketing .section-heading {
    display:block;
    margin-bottom:30px
  }
  .marketing .section-heading>p {
    margin-top:18px;
    max-width:400px
  }
  .marketing .section-heading>p br {
    display:none
  }
  .marketing h2 {
    font-size:34px
  }
  .operation-flow {
    grid-template-columns:1fr 1fr;
    gap:16px
  }
  .operation-flow strong {
    font-size:16px
  }
  .operation-flow p {
    font-size:12px
  }
  .operation-flow li {
    padding-top:16px
  }
  .operation-flow li:last-child {
    grid-column:1/-1
  }
  .operation-flow span {
    margin-bottom:10px
  }
  .operation-flow li:after {
    top:15px
  }
  .product-card {
    padding:25px
  }
  .card-top {
    font-size:9px;
    gap:12px;
    margin-bottom:30px
  }
  .marketing .product-card h3 {
    font-size:22px
  }
  .packing-band {
    display:block;
    padding:24px
  }
  .packing-band .text-link {
    margin-top:16px
  }
  .walkthrough-layout {
    grid-template-columns:1fr;
    gap:35px;
    padding-block:50px
  }
  .screen-pair {
    justify-content:center;
    gap:25px
  }
  .screen-pair figure {
    width:210px
  }
  .screen-pair figure:nth-child(2) {
    padding-top:30px
  }
  .walkthrough-layout>div>p:not(.eyebrow) {
    max-width:500px
  }
  .solution-row {
    grid-template-columns:25px 1fr 20px;
    gap:15px;
    padding:24px 0
  }
  .marketing .solution-row h3 {
    font-size:21px
  }
  .solution-row p {
    grid-column:2;
    grid-row:2;
    max-width:100%
  }
  .solution-row>span:last-child {
    grid-column:3;
    grid-row:1
  }
  .role-grid {
    gap:32px
  }
  .marketing .faq-section {
    grid-template-columns:1fr;
    gap:28px;
    padding-bottom:60px
  }
  .marketing .faq-section h2 br {
    display:none
  }
  .marketing .faq-section>div>p:not(.eyebrow) {
    display:block
  }
  .marketing summary {
    font-size:14px
  }
  .marketing .closing-section {
    padding:35px 28px;
    display:block
  }
  .marketing .closing-section h2 {
    font-size:30px
  }
  .marketing .closing-section .button {
    margin-top:25px
  }
  .marketing .footer-content {
    grid-template-columns:1fr 1fr;
    gap:32px
  }
  .marketing .footer-intro {
    grid-column:1/-1
  }
  .marketing .footer-bottom {
    flex-direction:row;
    flex-wrap:wrap;
    font-size:10px
  }
  .marketing .feature-hero {
    grid-template-columns:1fr;
    gap:35px
  }
  .marketing .feature-hero h1 {
    font-size:44px
  }
  .marketing .feature-hero .eyebrow {
    font-size:9px
  }
  .marketing .feature-hero figure {
    max-width:420px;
    width:100%;
    margin:auto
  }
  .marketing .feature-hero img {
    width:230px
  }
  .marketing .breadcrumbs {
    margin-bottom:40px
  }
  .marketing .feature-body h2 {
    font-size:28px
  }
  .marketing .feature-body p {
    font-size:14px
  }
  .setup-grid {
    grid-template-columns:1fr
  }
  .marketing .tour-layout {
    grid-template-columns:1fr;
    gap:30px;
    padding:24px
  }
  .tour-screen img {
    width:270px
  }
  .marketing .tour-context {
    margin-top:25px
  }
  .tour-page-heading {
    margin-bottom:35px
  }
  .marketing .tour-page-heading h1 {
    font-size:44px
  }
  .marketing .tour-tab strong {
    font-size:14px
  }
  .marketing .tour-tab small {
    font-size:11px
  }
  .marketing .tour-page-heading .tour-disclosure {
    font-size:11px
  }
  .tour-followup h2 {
    font-size:28px
  }
}
@media(max-width:480px) {
  .marketing .header-actions .button {
    font-size:10px;
    min-height:39px;
    padding:10px 12px;
    gap:10px
  }
  .marketing .brand {
    font-size:23px;
    gap:6px
  }
  .marketing .brand img {
    width:28px;
    height:28px
  }
  .marketing .site-header {
    gap:14px
  }
  .marketing .hero {
    padding-top:35px
  }
  .marketing .hero h1 {
    font-size:43px;
    letter-spacing:-1.9px
  }
  .marketing .hero>.hero-copy>.eyebrow {
    font-size:8px;
    letter-spacing:1.1px
  }
  .marketing .hero-description {
    font-size:14px
  }
  .marketing .hero .hero-actions {
    gap:17px
  }
  .marketing .hero-actions .button {
    font-size:12px;
    padding:14px 17px;
    gap:15px
  }
  .marketing .hero-actions .text-button {
    font-size:11px
  }
  .workspace-rail {
    display:none
  }
  .workspace-top {
    font-size:11px
  }
  .workspace-content {
    padding:20px 13px
  }
  .workspace-table th {
    font-size:8px
  }
  .workspace-table td {
    font-size:8px
  }
  .workspace-table strong {
    font-size:9px
  }
  .workspace-table small {
    font-size:7px
  }
  .badge {
    font-size:7px
  }
  .workspace-body {
    min-height:310px
  }
  .marketing .workspace-title h2 {
    font-size:21px
  }
  .product-grid {
    grid-template-columns:1fr;
    gap:15px
  }
  .marketing h2 {
    font-size:32px
  }
  .marketing .product-card h3 {
    font-size:24px
  }
  .card-top {
    margin-bottom:28px
  }
  .product-card p {
    font-size:13px
  }
  .screen-pair {
    gap:15px
  }
  .screen-pair figure {
    width:calc(50% - 8px)
  }
  .screen-pair img {
    border-radius:12px
  }
  .role-grid {
    gap:30px 24px
  }
  .marketing .role-grid h3 {
    font-size:17px
  }
  .role-grid p {
    font-size:11px
  }
  .role-initial {
    margin-bottom:18px
  }
  .marketing .feature-hero h1,.marketing .setup-hero h1,.marketing .tour-page-heading h1 {
    font-size:39px;
    letter-spacing:-1.6px
  }
  .marketing .feature-hero .hero-actions {
    gap:20px
  }
  .marketing .feature-intro {
    font-size:14px
  }
  .marketing .tour-layout {
    padding:20px
  }
  .tour-screen img {
    width:250px
  }
  .marketing .tour-context h2 {
    font-size:26px
  }
  .marketing .footer-content {
    grid-template-columns:1fr 1fr;
    gap:30px 20px
  }
  .marketing .tool-cards {
    grid-template-columns:1fr
  }
  .marketing .feature-body .eyebrow {
    font-size:8px
  }
  .setup-card {
    padding:25px
  }
}
@media(max-width:360px) {
  .marketing .header-actions .button {
    display:none
  }
  .marketing .hero h1 {
    font-size:39px
  }
  .marketing .hero .hero-actions {
    flex-direction:column;
    align-items:flex-start
  }
  .marketing .hero>.hero-copy>.eyebrow {
    font-size:7px
  }
  .marketing .hero-description {
    font-size:13px
  }
  .marketing .workspace-title h2 {
    font-size:19px
  }
  .view-summary strong {
    font-size:9px
  }
  .view-summary small {
    font-size:7px
  }
  .workspace-table td {
    padding-inline:2px
  }
  .marketing .feature-hero h1,.marketing .setup-hero h1,.marketing .tour-page-heading h1 {
    font-size:35px
  }
  .tour-screen img {
    width:220px
  }
  .marketing .footer-content {
    grid-template-columns:1fr
  }
  .role-grid {
    grid-template-columns:1fr
  }
  .role-grid p {
    font-size:13px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .marketing *,.marketing *:before,.marketing *:after {
    animation:none!important;
    transition:none!important
  }
  .workspace {
    transform:none
  }
}
.marketing .feature-body .contact-note {
  font-size:12px;
  overflow-wrap:anywhere;
  line-height:1.8;
  margin-top:20px
}