:root {
  --ink:#101010;
  --paper:#f7f7f7;
  --folder:#121212;
  --mono:'Azeret Mono',monospace;
  --display:'Playfair Display',Georgia,serif;
  --ui:Inter,Arial,sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  color:var(--ink);
  background:#f3edeb;
  -webkit-font-smoothing:antialiased
}

button,a {
  touch-action:manipulation
}

a {
  color:inherit
}

button {
  font:inherit
}

.skip-link {
  position:absolute;
  z-index:50;
  left:12px;
  top:-100px;
  background:white;
  padding:12px
}

.skip-link:focus {
  top:12px
}

:focus-visible {
  outline:3px solid #74b9e8;
  outline-offset:4px
}

.site-shell {
  --page-gutter:clamp(24px,5vw,160px);
  --page-width:min(calc(100% - 2 * var(--page-gutter)),2800px);
  overflow:hidden;
  background:linear-gradient(180deg,rgba(243,239,236,0) 0%,rgba(243,239,236,.55) 100%),linear-gradient(90deg,#f1e8e7 0%,#f3edea 46%,#eaf0ec 100%)
}

.pill {
  width:220px;
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  text-align:center;
  font:400 12px/1.3 var(--mono);
  text-decoration:none;
  transition:transform .2s ease,background-color .2s ease
}

.pill:hover {
  transform:translateY(-2px)
}

.pill-dark {
  background:#0a0a0a;
  color:#fffffc
}

.pill-dark:hover {
  background:#252525
}

.pill-light {
  background:#fbfbf9;
  border:1px solid #292929;
  color:#0a0a0a
}

.pill-light:hover {
  background:#fff
}

.hero {
  min-height:810px;
  position:relative;
  text-align:center
}

.site-header {
  height:96px;
  max-width:1440px;
  margin:auto;
  padding:0 72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.wordmark {
  font:700 24px/1.2 var(--display);
  letter-spacing:.26em;
  text-decoration:none;
  white-space:nowrap
}

.site-nav {
  display:flex;
  gap:25px;
  margin-left:auto;
  margin-right:60px
}

.site-nav a {
  font:400 12px/1.2 var(--mono);
  text-decoration:none
}

.site-nav a:hover {
  text-decoration:underline
}

.header-download {
  flex:none
}

.hero-content {
  display:flex;
  flex-direction:column;
  align-items:center
}

.hero-folder {
  width:314px;
  height:255px;
  object-fit:contain;
  margin-top:85px;
  animation:float 6s ease-in-out infinite
}

.hero h1 {
  font:400 62px/68px var(--display);
  letter-spacing:-.035em;
  margin:42px 24px 21px
}

.hero-actions {
  display:flex;
  gap:14px
}

.hero-note {
  font:400 12px/1.5 var(--mono);
  letter-spacing:.04em;
  margin:28px 0 0
}

@keyframes float {
  50% {
    transform:translateY(-8px)
  }
}

.folder-stack {
  position:relative
}

.folder-section {
  position:relative;
  color:white;
  isolation:isolate
}

.folder-section::before {
  content:'';
  position:absolute;
  z-index:-2;
  left:0;
  right:0;
  top:150px;
  bottom:0;
  background:var(--folder)
}

.folder-top {
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% auto;
  pointer-events:none
}

.section-inner {
  width:min(100%,1440px);
  margin:auto;
  padding:0 72px;
  position:relative
}

.folder-section h2 {
  font:400 40px/1.2 var(--display);
  margin:0
}

.supports {
  height:270px;
  z-index:1
}

.supports .folder-top {
  height:450px;
  background-image:url('assets/design/supports-desktop.png?v=e1d6214d1d22ffe9')
}

.supports::before {
  background:#181817;
  top:170px
}

.supports h2 {
  padding-top:57px
}

.apps-viewport {
  position:relative;
  overflow:hidden;
  width:100%;
  margin-top:65px
}

.apps-track {
  display:flex;
  width:max-content;
  animation:carousel 48s linear infinite
}

.apps-viewport:hover .apps-track,.apps-viewport:focus-within .apps-track {
  animation-play-state:paused
}

.apps-set {
  display:flex;
  gap:0;
  align-items:center;
  flex:none
}

.app-item {
  display:flex;
  gap:14px;
  align-items:center;
  padding:0 36px 0 0;
  margin-left:36px;
  white-space:nowrap;
  font:500 20px/1.3 var(--ui)
}

.app-item:first-child {
  margin-left:64px
}

.app-item img {
  width:44px;
  height:44px;
  object-fit:contain;
  flex:none
}

.supports-note {
  text-align:center;
  font:400 11px/1.5 var(--mono);
  margin:17px 0 0
}

@keyframes carousel {
  to {
    transform:translateX(-50%)
  }
}

.how {
  min-height:1330px;
  z-index:2
}

.how .folder-top {
  width:calc(100% + 72px);
  left:-36px;
  height:1470px;
  background-image:url('assets/design/how-desktop.png?v=1a236593f98e3090')
}

.how::before {
  top:160px
}

.how h2 {
  padding-top:57px
}

.workflow {
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:70px;
  align-items:start;
  margin:110px 0 0 10px
}

.workflow-steps {
  display:flex;
  flex-direction:column;
  gap:24px
}

.step {
  border:0;
  border-left:3px solid rgba(255,255,255,.17);
  background:none;
  color:white;
  text-align:left;
  padding:0 0 0 15px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:7px;
  min-height:110px
}

.step.is-active {
  border-color:#f5f5f5
}

.step:not(.is-active) {
  opacity:.76
}

.step:hover {
  opacity:1
}

.step-number {
  font:400 10px/1.4 var(--mono)
}

.step-title {
  font:400 25px/1.28 var(--display)
}

.step-copy {
  font:400 16px/25px var(--mono)
}

.mobile-total {
  display:none
}

.demo-window {
  position:relative;
  height:523px;
  border-radius:19px;
  background:rgba(0,0,0,.1);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}

.demo-card {
  width:min(100%,660px);
  height:408px;
  border-radius:22px;
  background:var(--paper);
  color:#121212;
  padding:36px 48px;
  box-shadow:0 14px 30px rgba(0,0,0,.12);
  font:400 13px/1.5 var(--mono)
}

.demo-card[hidden] {
  display:none
}

.demo-card h3 {
  font:400 34px/1.2 var(--display);
  margin:0 0 27px
}

.ui-input {
  background:#ededed;
  color:#555;
  font-size:10px;
  padding:8px 12px;
  margin:11px 0
}

.ui-input span {
  display:block;
  color:#222;
  font-size:12px;
  margin-top:3px
}

.ui-action {
  display:block;
  border-radius:999px;
  background:#121212;
  color:#fff;
  text-align:center;
  padding:10px 20px;
  margin-top:17px;
  font-size:11px
}

.ui-small {
  font-size:11px;
  color:#777
}

.ui-workspace {
  display:flex;
  gap:18px;
  align-items:center;
  background:#e9e9e9;
  padding:18px;
  margin:20px 0
}

.ui-workspace strong,.ui-workspace span {
  display:block
}

.ui-workspace span {
  font-size:10px;
  margin-top:5px
}

.ui-project-folder {
  width:80px;
  height:80px;
  object-fit:contain;
  flex:none
}

.ui-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
  background:#ededed;
  border-radius:4px;
  margin:10px 0;
  padding:12px;
  font-size:11px
}

.ui-row span:last-child {
  color:#777
}

.drop-zone {
  height:232px;
  background:#ededed;
  border:1px dashed #d4d4d4;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-size:10px;
  color:#555
}

.drop-zone span {
  font:400 25px/1 var(--display)
}

.demo-control {
  display:none
}

.quick-workflow {
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:70px;
  align-items:start;
  margin:100px 0 0 10px;
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,.15)
}

.quick-copy .kicker {
  font:400 10px/1.4 var(--mono);
  letter-spacing:.05em;
  margin:0 0 18px
}

.quick-copy h3 {
  font:400 25px/1.3 var(--display);
  margin:0 0 10px
}

.quick-copy>p:last-child {
  font:400 16px/25px var(--mono);
  margin:0
}

.quick-window {
  height:470px
}

.pricing {
  min-height:542px;
  z-index:3
}

.pricing .folder-top {
  width:calc(100% + 72px);
  left:-36px;
  height:822px;
  background-image:url('assets/design/pricing-desktop.png?v=43f3863aa08797b9')
}

.pricing::before {
  top:160px
}

.pricing h2 {
  padding-top:54px
}

.pricing-cards {
  display:flex;
  gap:32px;
  margin-top:48px
}

.price-card {
  width:calc(50% - 16px);
  height:306px;
  background:#f7f7f7;
  color:#141414;
  border-radius:15px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:39px 20px 26px
}

.price-card h3 {
  font:400 44px/1.2 var(--display);
  margin:0
}

.price-card p {
  font:400 17px/1.4 var(--display);
  margin:16px 0 0
}

.price-card .price-email {
  font:400 11px/1.5 var(--mono);
  margin:8px 0 12px
}

.price-card .pill {
  margin-top:auto
}

.price-card.regular h3 {
  display:flex;
  align-items:baseline;
  gap:10px
}

.price-amount {
  font:400 76px/1 var(--display)
}

.price-period {
  font:400 19px/1.2 var(--display)
}

.faq {
  min-height:1316px;
  z-index:4;
  border-radius:0 0 26px 26px;
  overflow:hidden
}

.faq .folder-top {
  width:calc(100% + 72px);
  left:-36px;
  height:1390px;
  background-image:url('assets/design/faq-desktop.png?v=80cabd8a882c886d')
}

.faq::before {
  top:150px
}

.faq h2 {
  padding-top:58px
}

.faq-list {
  position:relative;
  width:100%;
  margin-top:59px;
  padding-bottom:80px;
  min-height:980px
}

.faq-group {
  width:42%;
  font:400 10px/1.4 var(--mono);
  color:#aaa;
  margin:24px 0 12px;
  letter-spacing:.05em
}

.faq-item {
  width:42%;
  border-bottom:1px solid rgba(255,255,255,.14)
}

.faq-item button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border:0;
  background:transparent;
  color:white;
  text-align:left;
  width:100%;
  padding:12px 8px;
  font:400 12px/1.5 var(--mono);
  cursor:pointer
}

.faq-item button:hover,.faq-item.is-active button {
  background:rgba(255,255,255,.11)
}

.faq-sign {
  font-size:18px;
  font-weight:400;
  flex:none
}

.faq-answer {
  position:absolute;
  left:48%;
  top:10px;
  width:52%;
  max-height:840px;
  overflow:auto;
  padding:0 5px 0 0;
  font:400 16px/27px var(--mono)
}

.faq-answer[hidden] {
  display:none
}

.faq-answer h3 {
  font:400 34px/1.25 var(--display);
  margin:0 0 22px
}

.faq-answer p {
  margin:0 0 19px
}

.faq-answer ol {
  padding-left:24px;
  margin:0 0 17px
}

.faq-answer li {
  margin-bottom:10px
}

.faq-answer a {
  text-decoration:underline;
  text-underline-offset:3px
}

.footer {
  text-align:center;
  min-height:416px;
  padding:112px 72px 0
}

.footer h2 {
  font:400 46px/1.2 var(--display);
  margin:0 0 21px
}

.footer>p {
  font:400 12px/1.4 var(--mono);
  letter-spacing:.04em;
  margin:18px 0 0
}

.footer-bottom {
  border-top:1px solid rgba(10,10,10,.14);
  margin:93px auto 0;
  max-width:1296px;
  padding:22px 0;
  display:flex;
  justify-content:space-between;
  gap:16px;
  font:400 11px/1.4 var(--mono)
}

.footer-bottom a {
  text-decoration:none
}

.footer-bottom a:hover {
  text-decoration:underline
}

@media(max-width:1050px) and (min-width:701px) {
  .site-header {
    padding-left:40px;
    padding-right:40px
  }
  .site-nav {
    margin-right:18px
  }
  .workflow,.quick-workflow {
    gap:36px;
    grid-template-columns:260px minmax(0,1fr)
  }
  .demo-card {
    width:calc(100% - 28px)
  }
  .faq-answer {
    left:46%;
    width:54%
  }
}

@media(max-width:700px) {
  .hero {
    min-height:700px
  }
  .site-header {
    height:85px;
    padding:0 24px;
    gap:9px;
    align-items:flex-start;
    padding-top:24px
  }
  .wordmark {
    font-size:18px;
    letter-spacing:.26em
  }
  .site-nav {
    gap:14px;
    margin:5px 0 0 auto
  }
  .site-nav a {
    font-size:9px
  }
  .header-download {
    display:none
  }
  .hero-folder {
    width:178px;
    height:178px;
    margin-top:78px
  }
  .hero h1 {
    font-size:32px;
    line-height:42px;
    letter-spacing:-.02em;
    margin:52px 14px 24px
  }
  .hero-actions {
    flex-direction:column;
    gap:12px
  }
  .hero-note {
    font-size:9px;
    margin-top:18px
  }
  .folder-section h2 {
    font-size:30px;
    line-height:40px
  }
  .supports {
    height:230px
  }
  .supports .folder-top {
    height:340px;
    background-image:url('assets/design/supports-mobile.png?v=2364647ca0951209')
  }
  .supports::before {
    top:110px
  }
  .supports h2 {
    padding-top:19px
  }
  .apps-viewport {
    margin-top:50px
  }
  .app-item {
    font-size:12px;
    gap:8px;
    margin-left:20px;
    padding-right:16px
  }
  .app-item:first-child {
    margin-left:24px
  }
  .app-item img {
    width:28px;
    height:28px
  }
  .supports-note {
    font-size:9px;
    margin-top:29px
  }
  .how {
    min-height:1276px
  }
  .how .folder-top {
    width:calc(100% + 72px);
    left:-36px;
    height:1452px;
    background-image:url('assets/design/how-mobile.png?v=9ee579ef658adbea')
  }
  .how::before {
    top:115px
  }
  .how h2 {
    padding-top:24px;
    max-width:160px
  }
  .workflow {
    display:flex;
    flex-direction:column;
    gap:0;
    margin:50px 0 0
  }
  .workflow-steps {
    display:block;
    height:110px;
    width:100%
  }
  .step {
    width:100%;
    min-height:110px;
    padding:0;
    border:0;
    gap:8px;
    display:none
  }
  .step.is-active {
    display:flex
  }
  .step-number {
    font-size:10px
  }
  .step-title {
    font-size:25px;
    line-height:33px
  }
  .step-copy {
    font-size:14px;
    line-height:22px
  }
  .mobile-total {
    display:inline
  }
  .demo-control {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:13px;
    height:20px;
    margin:3px 0 7px;
    font:400 10px/1 var(--mono)
  }
  .demo-control button {
    border:1px solid rgba(255,255,255,.45);
    background:transparent;
    color:white;
    width:24px;
    height:24px;
    border-radius:50%;
    cursor:pointer;
    font-size:17px;
    line-height:1
  }
  .workflow>.demo-window {
    order:3
  }
  .workflow>.demo-control {
    order:2
  }
  .demo-window {
    width:100%;
    height:300px;
    border-radius:16px
  }
  .demo-card {
    height:300px;
    width:100%;
    padding:25px 27px;
    border-radius:16px
  }
  .demo-card h3 {
    font-size:25px;
    margin-bottom:17px
  }
  .ui-input {
    margin:6px 0;
    font-size:8px;
    padding:6px 9px
  }
  .ui-input span {
    font-size:9px
  }
  .ui-action {
    font-size:9px;
    padding:8px;
    margin-top:12px
  }
  .drop-zone {
    height:210px
  }
  .quick-workflow {
    display:flex;
    flex-direction:column;
    gap:0;
    margin:60px 0 0;
    padding-top:25px
  }
  .quick-copy .kicker {
    font-size:9px;
    margin-bottom:10px
  }
  .quick-copy h3 {
    font-size:25px;
    line-height:33px
  }
  .quick-copy>p:last-child {
    font-size:13px;
    line-height:22px
  }
  .quick-control {
    align-self:flex-end;
    margin-top:6px
  }
  .quick-window {
    height:300px
  }
  .pricing {
    min-height:674px
  }
  .pricing .folder-top {
    width:calc(100% + 72px);
    left:-36px;
    height:880px;
    background-image:url('assets/design/pricing-mobile.png?v=16f983d743e58c10')
  }
  .pricing::before {
    top:120px
  }
  .pricing h2 {
    padding-top:25px
  }
  .pricing-cards {
    display:flex;
    flex-direction:column;
    gap:24px;
    margin-top:45px
  }
  .price-card {
    width:100%;
    height:242px;
    border-radius:12px;
    padding:23px 15px 18px
  }
  .price-card.regular {
    order:1
  }
  .price-card.enterprise {
    order:2
  }
  .price-card h3 {
    font-size:35px
  }
  .price-card p {
    font-size:15px;
    margin-top:9px
  }
  .price-card .price-email {
    font-size:9px;
    margin:5px 0
  }
  .price-card .pill {
    width:220px;
    min-height:42px;
    font-size:10px
  }
  .price-amount {
    font-size:64px
  }
  .price-period {
    font-size:16px
  }
  .faq {
    min-height:1181px
  }
  .faq .folder-top {
    display:none
  }
  .faq::before {
    top:0
  }
  .faq h2 {
    padding-top:26px
  }
  .faq-list {
    margin-top:38px;
    padding-bottom:100px;
    min-height:0
  }
  .faq-group {
    width:100%;
    font-size:9px;
    margin:25px 0 12px
  }
  .faq-item {
    width:100%
  }
  .faq-item button {
    font-size:11px;
    line-height:1.6;
    padding:14px 2px
  }
  .faq-answer {
    position:static;
    width:100%;
    max-height:none;
    overflow:visible;
    padding:13px 2px 22px;
    font-size:13px;
    line-height:22px
  }
  .faq-answer h3 {
    display:none
  }
  .faq-answer p {
    margin-bottom:15px
  }
  .faq-answer li {
    margin-bottom:7px
  }
  .footer {
    min-height:362px;
    padding:58px 24px 0
  }
  .footer h2 {
    font-size:34px;
    margin-bottom:17px
  }
  .footer>p {
    font-size:9px
  }
  .footer-bottom {
    margin-top:76px;
    padding:20px 0;
    flex-direction:column;
    gap:9px;
    font-size:9px
  }
}

@media(max-width:360px) {
  .site-nav {
    gap:8px
  }
  .site-nav a {
    font-size:8px
  }
  .hero h1 {
    font-size:29px
  }
  .pill {
    width:210px
  }
  .app-item {
    font-size:11px
  }
  .step-copy {
    font-size:13px
  }
  .quick-copy>p:last-child {
    font-size:12px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .hero-folder,.apps-track {
    animation:none
  }
  .apps-viewport {
    overflow-x:auto;
    scrollbar-width:thin
  }
  .apps-set[aria-hidden="true"] {
    display:none
  }
  .pill {
    transition:none
  }
}

@media(min-width:701px) {
  .quick-workflow {
    grid-template-rows:auto 1fr
  }
  .quick-copy {
    grid-column:1;
    grid-row:1
  }
  .quick-control {
    grid-column:1;
    grid-row:2;
    display:flex;
    align-items:center;
    gap:13px;
    justify-content:flex-start;
    margin-top:20px;
    align-self:start;
    font:400 10px/1 var(--mono)
  }
  .quick-control button {
    border:1px solid rgba(255,255,255,.45);
    background:transparent;
    color:white;
    width:30px;
    height:30px;
    border-radius:50%;
    cursor:pointer;
    font-size:20px
  }
  .quick-window {
    grid-column:2;
    grid-row:1 / span 2
  }
}

.folder-stack::before {
  content:'';
  position:absolute;
  inset:200px 0 0;
  background:var(--folder)
}

.folder-stack::before {
  bottom:26px
}

@media(min-width:701px) {
  .price-card.regular p {
    font-size:23px;
    line-height:32px
  }
  .price-card.regular .price-period {
    font-size:23px
  }
  .price-card.enterprise p {
    font:400 14px/22px var(--mono)
  }
  .price-card.enterprise .price-email {
    font-size:13px;
    line-height:22px
  }
}

@media(max-width:700px) {
  .price-card.regular p {
    font-size:19px;
    line-height:28px
  }
  .price-card.regular .price-period {
    font-size:19px;
    line-height:26px
  }
  .price-card .pill {
    min-height:54px;
    font-size:12px
  }
  .price-card.enterprise p {
    font:400 11px/18px var(--mono)
  }
  .price-card.enterprise .price-email {
    font-size:10px
  }
}

/* Figma FINAL frames: align artwork bounds, not exported shadow margins. */
.how .folder-top,.pricing .folder-top,.faq .folder-top { top:-50px }
.how { min-height:1330px }
.how h2 { line-height:53px }
.workflow { margin-top:100px }
.step { padding:0; border:0; min-height:109px; gap:7px; position:relative }
.step::before { content:''; position:absolute; left:-10px; top:0; bottom:0; width:2px; background:transparent }
.step.is-active::before { background:#f5f5f5 }
.step-number { line-height:12px }
.step-title { line-height:33px }
.demo-window { background:transparent; height:523px }
.quick-workflow { margin:67px 0 0; padding-top:6px; grid-template-columns:290px minmax(0,1fr); gap:70px }
.quick-copy { padding:58px 0 0 10px }
.quick-copy .kicker { margin-bottom:12px; line-height:12px }
.quick-copy h3 { margin-bottom:12px }
.quick-window { height:523px }
.pricing h2 { padding-top:51px; line-height:53px }
.pricing-cards { margin-top:81px }
.price-card { padding:39px 40px 33px }
.price-card h3 { height:92px; display:flex; align-items:center; justify-content:center; flex:none; line-height:58px }
.price-card.regular h3 { align-items:baseline; gap:14px; white-space:nowrap }
.price-amount { line-height:92px }
.price-period { line-height:30px }
.price-card p { margin:20px 0 0 }
.price-card.enterprise p { margin-top:21px }
.price-card .price-email { margin:2px 0 0 }
.price-card .pill { flex:none }
.faq { overflow:visible }
.faq h2 { padding-top:50px; line-height:54px }
.faq-list { margin-top:112px; min-height:1100px; padding-bottom:72px; display:flow-root }
.faq-list::before { content:''; position:absolute; left:39.506%; top:0; bottom:72px; width:1px; background:rgba(255,255,255,.2) }
.faq-group { width:36.883%; line-height:16px; margin:0 0 8px; color:#fff }
.faq-item { width:36.883%; border:0; margin-bottom:8px }
.faq-item button { min-height:60px; padding:16px 18px; font:400 16px/24px var(--mono); border-radius:6px }
.faq-sign { display:none }
.faq-answer { left:42.284%; top:0; width:53.858%; max-height:none; overflow:visible; padding:0; scroll-margin-top:24px }
.faq-answer .faq-category { font:400 10px/16px var(--mono); margin:0 0 24px }
.faq-answer h3 { line-height:44px; margin-bottom:24px }
@media(min-width:701px) and (max-width:1050px) {
  .workflow { grid-template-columns:230px minmax(0,1fr); gap:30px }
  .quick-workflow { grid-template-columns:240px minmax(0,1fr); gap:30px }
  .demo-card { width:100%; padding:30px 24px }
  .price-card { padding-left:20px; padding-right:20px }
  .faq-item button { font-size:14px; padding-left:10px; padding-right:10px }
  .faq-answer h3 { font-size:30px; line-height:39px }
  .faq-answer { font-size:14px; line-height:24px }
}
@media(max-width:700px) {
  .how h2 { line-height:40px }
  .workflow { margin-top:48px; position:relative }
  /* Content, controls, and cards keep the same breathing room as text wraps. */
  .workflow,.quick-workflow { gap:24px }
  .workflow>.demo-control,.quick-workflow>.demo-control { height:auto; min-height:24px; margin:0; flex:none }
  .step::before { display:none }
  .demo-window { height:300px }
  .quick-workflow { margin:80px 0 0; padding-top:40px }
  .quick-copy { padding:0 }
  .quick-copy .kicker { margin-bottom:12px }
  .quick-copy h3 { margin-bottom:12px }
  .quick-window { height:300px }
  .pricing h2 { padding-top:24px; line-height:40px }
  .pricing-cards { margin-top:68px }
  .price-card { padding:25px 24px; }
  .price-card h3 { height:78px }
  .price-card.enterprise { padding-top:29px; padding-bottom:29px }
  .price-card.enterprise h3 { height:50px; font-size:30px; line-height:40px }
  .price-card.regular p { margin-top:16px }
  .price-card.enterprise p { margin-top:19px; line-height:20px }
  .price-card.enterprise .price-email { font-size:11px; line-height:20px; margin-top:2px }
  .price-amount { line-height:78px }
  .faq .folder-top { display:block; height:1253px; background-image:url('assets/design/faq-mobile.png?v=434a1a210c04fd87') }
  .faq::before { top:110px; border-radius:0 0 26px 26px }
  .faq h2 { padding-top:24px; line-height:40px }
  .faq-list { margin-top:44px; min-height:0; padding-bottom:52px }
  .faq-list::before { display:none }
  .faq-group { width:100%; font-size:10px; margin:0 0 12px }
  .faq-group:not(:first-child) { margin-top:16px }
  .faq-item { width:100%; border-bottom:1px solid rgba(255,255,255,.14); margin-bottom:0 }
  .faq-item button { font-size:14px; line-height:22px; padding:16px 0; border-radius:0 }
  .faq-sign { display:block }
  .faq-answer { width:100%; padding:4px 0 24px; scroll-margin-top:24px }
  .faq-answer .faq-category { margin-bottom:18px }
}

/* Interface moments use the approved text, field sizes, and content grid. */
.hero h1 { transform:translateY(-2px) }
.how .folder-top,.pricing .folder-top { height:calc(100% + 50px) }
.demo-card h3 { line-height:45px; margin:0 0 20px }
.ui-input { background:none; padding:0; margin:0 0 20px; font:400 10px/12px var(--mono); color:#666 }
.ui-input span { margin-top:8px; padding:12px 16px; min-height:46px; border-radius:10px; background:#ebebeb; color:#121212; font:400 18px/22px var(--ui) }
.ui-action { margin-top:0; height:42px; padding:14px 12px; font:400 12px/14px var(--mono) }
.ui-small { margin:20px 0 0; font:400 13px/15px var(--mono); color:#555 }
.ui-workspace { height:103px; padding:12px 24px; gap:20px; margin:0 0 20px; border-radius:10px; background:#ebebeb }
.ui-workspace strong { font:400 24px/29px var(--ui) }
.ui-workspace span { font:400 15px/18px var(--ui); margin-top:12px }
.ui-project-folder { width:80px; height:80px }
.ui-row { height:64px; align-items:center; margin:0 0 13px; padding:0 18px; border-radius:10px; font:400 17px/21px var(--ui) }
.ui-row span:last-child { font:400 9px/12px var(--mono); text-align:right }
.drop-zone { height:202px; border-radius:10px; font:400 18px/22px var(--ui); gap:25px }
.drop-zone span { font-size:36px; line-height:44px }
.drop-zone p { margin:0 }
@media(min-width:701px) {
  .workflow .demo-window { transform:translateY(-3px) }
}
@media(max-width:1050px) and (min-width:701px) {
  .demo-card h3 { font-size:28px; line-height:36px }
  .ui-input span { font-size:14px }
  .ui-row { font-size:13px; padding:0 12px; gap:8px }
  .ui-row span:last-child { font-size:8px }
  .ui-workspace { padding:12px; gap:10px }
  .ui-project-folder { width:60px; height:60px }
  .ui-workspace strong { font-size:20px }
  .drop-zone { font-size:14px; text-align:center }
}
@media(max-width:700px) {
  .faq .folder-top { width:100%; left:0; background-size:100% auto }
  .demo-card { padding:20px; }
  .demo-card h3 { font-size:25px; line-height:30px; margin-bottom:12px }
  .ui-input { font-size:9px; line-height:12px; margin-bottom:12px }
  .ui-input span { margin-top:10px; padding:9px 12px; min-height:36px; font-size:14px; line-height:18px }
  .ui-action { font-size:11px; line-height:14px; padding:14px 8px; margin-top:0 }
  .ui-small { font-size:10px; line-height:14px; margin-top:12px }
  .ui-workspace { height:80px; padding:10px 14px; margin-bottom:12px; gap:14px }
  .ui-project-folder { width:60px; height:60px }
  .ui-workspace strong { font-size:20px; line-height:24px }
  .ui-workspace span { font-size:13px; line-height:16px; margin-top:8px }
  .ui-row { height:52px; padding:0 12px; margin-bottom:12px; font-size:14px; line-height:18px }
  .ui-row span:last-child { font-size:8px }
  .drop-zone { height:160px; font-size:13px; gap:20px }
  .drop-zone span { font-size:30px; line-height:36px }
}
/* Keep the approved folder cap while the accordion body grows with its text. */
.faq .folder-top { height:230px }
.faq::before { top:180px; border:1px solid rgba(255,255,255,.24); border-top:0; border-radius:0 0 26px 26px; background-color:#131313; background-image:linear-gradient(rgba(19,19,19,.85),rgba(19,19,19,.85)),url('assets/design/folder-texture.png?v=7535ee414865eb0c'); background-blend-mode:normal,soft-light }
@media(max-width:700px) {
  .faq .folder-top { height:170px }
  .faq::before { top:120px }
}
@media(max-width:700px) {
  .how { min-height:1276px; padding-bottom:72px }
}
@media(min-width:701px) {
  .demo-window { align-items:flex-start; padding-top:59px }
  .quick-workflow { padding-top:5px }
}

/* Full-page review: restore the hero and footer to the approved frame geometry. */
.site-header { height:140px; position:relative }
.wordmark { position:absolute; left:72px; top:51px }
.site-nav { position:absolute; right:332px; top:59px; width:188px; justify-content:space-between; gap:0; margin:0 }
.site-nav a { line-height:16px }
.header-download { position:absolute; right:72px; top:43px }
.hero-folder { width:313.6px; height:254.8px; object-fit:fill; margin-top:42px }
.hero h1 { margin-top:38.2px; margin-bottom:32px }
.hero-note { margin-top:32px; font-size:12px; line-height:16px; letter-spacing:0 }
.supports h2 { line-height:53px }
.apps-viewport { margin-top:71px; height:64px }
.apps-track,.apps-set { height:100% }
.app-item { margin-left:0; padding-right:72px; font-weight:400; line-height:24px }
.apps-set { padding-left:64px }
.app-item:first-child { margin-left:0 }
.supports-note { margin-top:18px; line-height:13px }
.how::before,.pricing::before { bottom:-160px; background-color:#131313; background-image:linear-gradient(rgba(19,19,19,.85),rgba(19,19,19,.85)),url('assets/design/folder-texture.png?v=7535ee414865eb0c'); background-blend-mode:normal,soft-light; background-size:auto,721.3px 721.3px }
.faq::before { background-size:auto,721.3px 721.3px }
.footer { padding-top:96px }
.footer h2 { font-size:44px; line-height:59px; margin-bottom:26px }
.footer>p { margin-top:26px; font-size:11px; line-height:13px; letter-spacing:0 }
.footer-bottom { margin-top:26px; padding-top:41px; justify-content:center; font-size:12px; line-height:20px }
@media(min-width:701px) and (max-width:1050px) {
  .wordmark { left:40px }
  .header-download { right:40px }
  .site-nav { right:290px }
  .demo-card { width:min(100%,660px) }
}
@media(max-width:700px) {
  .site-header { height:85px }
  .wordmark { left:24px; top:31px; line-height:22px }
  .site-nav { top:34px; right:24px; width:172px; gap:0; margin:0 }
  .site-nav a { font-size:10px; line-height:16px }
  .hero-folder { width:180px; height:146.25px; margin-top:61px }
  .hero h1 { margin-top:49.75px; margin-bottom:46px }
  .hero-note { margin-top:30px; font-size:10px }
  .supports h2 { line-height:40px }
  .apps-viewport { height:48px; margin-top:61px }
  .apps-set { padding-left:24px }
  .app-item { font-size:15px; line-height:18px; gap:10.5px; margin-left:0; padding-right:54px }
  .app-item:first-child { margin-left:0 }
  .app-item img { width:33px; height:33px }
  .supports-note { margin-top:29px }
  .workflow-steps { height:auto; min-height:110px }
  .step-number { line-height:14px }
  .step { gap:8px }
  .workflow>.demo-control { align-self:flex-end; flex:none }
  .footer { padding-top:56px }
  .footer h2 { font-size:30px; line-height:40px; margin-bottom:22px }
  .footer>p { margin-top:22px; font-size:10px; line-height:16px }
  .footer-bottom { margin-top:22px; padding-top:37px; gap:4px; font-size:10px; line-height:16px }
  .footer-bottom a { font-size:12px; line-height:20px }
}
@media(max-width:360px) {
  .site-nav { width:150px }
  .site-nav a { font-size:9px }
}
.supports h2 { padding-top:58px }
.apps-viewport { margin-top:70px }
@media(max-width:700px) {
  .supports h2 { padding-top:24px }
  .apps-viewport { margin-top:56px }
  .supports-note { margin-top:20px; line-height:14px }
}
.hero h1 { letter-spacing:0; color:#292929 }
.hero-folder { object-fit:cover }

/* The content frame and folder tab share one section-width coordinate system.
   At wide sizes the approved curves hold their size while straight runs extend.
   The body remains full bleed and independent of the FAQ accordion height. */
.folder-stack::before,.folder-section::before { display:none }
.folder-stack {
  container-type:inline-size;
  --content-width:min(calc(100cqw - 2 * var(--page-gutter)),2800px);
  --content-x:calc((100cqw - var(--content-width))/2);
  --tab-end:calc(var(--content-x) + clamp(220px,23.194444cqw,650px));
  --cap-height:180px;
  --shelf-y:122px;
  --corner-x:min(2.777778cqw,40px);
  --corner-y:40px;
  --left-corner-y:40px;
  --slope-width:clamp(110px,14.583333cqw,320px);
  --cap-slope:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20210%20123%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20C20%200%2032%208%2045%2018%20L171%20110%20C183%20119%20193%20122%20210%20122%20V123%20H0%20Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
  --cap-corner:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20C22%200%2040%2018%2040%2040%20H0%20Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
  --slope-stroke:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20210%20123%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20C20%200%2032%208%2045%2018%20L171%20110%20C183%20119%20193%20122%20210%20122%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-opacity%3D%22.24%22%20stroke-width%3D%222.5%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E");
  --corner-stroke:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20C22%200%2040%2018%2040%2040%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-opacity%3D%22.24%22%20stroke-width%3D%222.5%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E")
}
.folder-section .section-inner { width:var(--content-width); padding-inline:0 }
.folder-section .folder-top {
  display:block;
  inset:0 0 auto;
  width:100%;
  height:calc(100% + var(--cap-height));
  background:none;
  filter:drop-shadow(0 -14px 18px rgba(0,0,0,.45));
  --folder-color:#131313
}
.folder-top::before,.folder-top::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  border-top-left-radius:var(--corner-x) var(--left-corner-y);
  mask-image:linear-gradient(#fff,#fff),var(--cap-slope),linear-gradient(#fff,#fff),var(--cap-corner),linear-gradient(#fff,#fff);
  mask-size:calc(var(--tab-end) + 1px) var(--cap-height),var(--slope-width) calc(var(--shelf-y) + 1px),calc(100% - var(--corner-x) + 1px) calc(var(--cap-height) - var(--shelf-y) + 1px),var(--corner-x) calc(var(--corner-y) + 1px),100% calc(100% - var(--shelf-y) - var(--corner-y) + 2px);
  mask-position:left top,var(--tab-end) top,left var(--shelf-y),right var(--shelf-y),left bottom;
  mask-repeat:no-repeat
}
.folder-top::before {
  background-color:var(--folder-color);
  background-image:linear-gradient(rgba(19,19,19,.85),rgba(19,19,19,.85)),url('assets/design/folder-texture.png?v=7535ee414865eb0c');
  background-blend-mode:normal,soft-light;
  background-size:auto,721.3135px 721.3135px
}
.folder-top::after {
  background-origin:border-box;
  border-top:1.25px solid rgba(255,255,255,.24);
  border-left:1.25px solid rgba(255,255,255,.24);
  border-right:1.25px solid rgba(255,255,255,.24);
  background-image:var(--slope-stroke),linear-gradient(rgba(255,255,255,.24),rgba(255,255,255,.24)),var(--corner-stroke);
  background-size:var(--slope-width) calc(var(--shelf-y) + 1px),calc(100% - var(--tab-end) - var(--slope-width) - var(--corner-x) + 4px) 1.25px,var(--corner-x) calc(var(--corner-y) + 1px);
  background-position:var(--tab-end) top,calc(var(--tab-end) + var(--slope-width) - 2px) var(--shelf-y),right var(--shelf-y);
  background-repeat:no-repeat
}
.supports .folder-top { filter:none; --folder-color:#181817 }
.supports .folder-top::before { background-image:linear-gradient(rgba(24,24,23,.85),rgba(24,24,23,.85)),url('assets/design/folder-texture.png?v=7535ee414865eb0c') }
.supports .folder-top::after { display:none }
.pricing { --shelf-y:91.8588px; --corner-y:30.1176px; --left-corner-y:30.1176px }
.faq .folder-top { height:100% }
.faq .folder-top::before,.faq .folder-top::after { border-bottom-left-radius:40px; border-bottom-right-radius:40px }
.faq .folder-top::after { border-bottom:1.25px solid rgba(255,255,255,.24) }
.footer-bottom a { text-decoration:underline; text-underline-offset:3px }
@media(min-width:701px) and (max-width:1050px) { .folder-section h2 { font-size:30px } }
@media(max-width:700px) {
  .folder-stack {
    --tab-end:max(calc(var(--content-x) + 88px),28.717949cqw);
    --cap-height:120px;
    --shelf-y:64px;
    --corner-x:max(6.153846cqw,24px);
    --corner-y:24px;
    --left-corner-y:24px;
    --slope-width:max(28.205128cqw,110px);
    --cap-slope:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20110%2065%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20C12%200%2018%204%2028%2012%20L86%2056%20C93%2062%2099%2064%20110%2064%20V65%20H0%20Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
    --slope-stroke:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20110%2065%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20C12%200%2018%204%2028%2012%20L86%2056%20C93%2062%2099%2064%20110%2064%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-opacity%3D%22.24%22%20stroke-width%3D%222.5%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E")
  }
  .pricing { --shelf-y:64px; --corner-y:24px; --left-corner-y:24px }
  .faq { --shelf-y:75.584px; --corner-y:28.344px; --left-corner-y:28.344px }
  .faq .folder-top::before,.faq .folder-top::after { border-bottom-left-radius:24px; border-bottom-right-radius:24px }
}

/* Quick Package's initial drop target follows the approved Figma content grid.
   SVG keeps the measured dash lengths and fractional mobile stroke at every width. */
.quick-window [data-panel="0"] h3 { margin-bottom:18px }
.quick-window .drop-zone {
  display:block; height:164px; padding-top:24px; border:0; border-radius:14px;
  background:#f0f0f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='.5' y='.5' style='width:calc(100%25 - 1px);height:calc(100%25 - 1px)' rx='13.5' fill='none' stroke='%23bfbfbf' stroke-width='1' stroke-dasharray='5 5'/%3E%3C/svg%3E") no-repeat;
  color:#121212; text-align:center;
}
.quick-window .drop-zone span { display:block; width:100px; height:44px; margin:0 auto; color:#737373; font:400 36px/44px var(--ui) }
.quick-window .drop-zone p { width:calc(100% - 24px); max-width:460px; margin:36px auto 0; font:400 18px/22px var(--ui) }
@media(min-width:701px) and (max-width:1050px) {
  .quick-window .drop-zone p { font-size:14px }
}
@media(max-width:700px) {
  .quick-window [data-panel="0"] h3 { font-size:24px; margin-bottom:12px }
  .quick-window .drop-zone {
    height:160px; padding-top:28px; border-radius:7.254545px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='.259091' y='.259091' style='width:calc(100%25 - .518182px);height:calc(100%25 - .518182px)' rx='6.995454' fill='none' stroke='%23bfbfbf' stroke-width='.518182' stroke-dasharray='2.590909 2.590909'/%3E%3C/svg%3E");
  }
  .quick-window .drop-zone span { height:40px; font-size:32px; line-height:30px }
  .quick-window .drop-zone p { height:32px; margin-top:38px; font-size:12px; line-height:16px }
}

/* One content grid serves the header, folder sections, and footer. The approved
   1440 and 390 layouts retain 72 and 24 px gutters; wide views gain room. */
.site-header { width:var(--page-width); max-width:none; padding-inline:0 }
.wordmark { left:0 }
.site-nav { right:260px }
.header-download { right:0 }
.footer { padding-inline:var(--page-gutter) }
.footer-bottom { width:100%; max-width:2800px }
@media(max-width:700px) {
  .site-nav { right:0 }
  .wordmark { left:0 }
}
@media(min-width:701px) and (max-width:1440px) {
  .workflow,.quick-workflow { gap:clamp(30px,calc(-8px + 5.42vw),70px) }
  .workflow { grid-template-columns:clamp(230px,calc(182.6px + 6.77vw),280px) minmax(0,1fr) }
  .quick-workflow { grid-template-columns:clamp(240px,calc(192.6px + 6.77vw),290px) minmax(0,1fr) }
}
/* The tablet qualifier crosses the following folder's raised tab. Let the
   heading, carousel and any wrapped note set its height, with clear space. */
@media(min-width:701px) and (max-width:1050px) {
  .supports { height:auto; min-height:270px; padding-bottom:24px }
}

/* Larger desktops grow as a composition rather than leaving 1440 px artwork
   and controls adrift inside a full-width folder background. */
@media(min-width:1441px) {
  .pill { width:clamp(220px,calc(91.4px + 8.93vw),330px); min-height:clamp(54px,calc(41.1px + .893vw),76px); font-size:clamp(12px,calc(8.4px + .25vw),18px) }
  .hero { min-height:clamp(810px,calc(566px + 16.94vw),1215px) }
  .site-header { height:clamp(140px,calc(101px + 2.708vw),205px); display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:clamp(32px,3vw,100px) }
  .wordmark,.site-nav,.header-download { position:static }
  .wordmark { justify-self:start; font-size:clamp(24px,calc(14px + .694vw),40px) }
  .site-nav { width:auto; gap:clamp(25px,2.1vw,70px); margin:0 }
  .site-nav a { font-size:clamp(12px,calc(7px + .347vw),20px); line-height:1.4 }
  .hero-folder { width:clamp(313.6px,calc(202px + 7.75vw),500px); height:auto; aspect-ratio:313.6 / 254.8; margin-top:clamp(42px,3vw,115px) }
  .hero h1 { font-size:clamp(62px,calc(33.2px + 2vw),110px); line-height:1.1; max-width:min(90vw,1800px); margin-top:clamp(38.2px,3.3vw,110px); margin-bottom:clamp(32px,2.5vw,80px) }
  .hero-actions { gap:clamp(14px,1.2vw,42px) }
  .hero-note { margin-top:clamp(32px,2.5vw,80px); font-size:clamp(12px,calc(7px + .347vw),20px); line-height:1.4 }
  .folder-section h2 { font-size:clamp(40px,calc(16px + 1.667vw),76px); line-height:1.2 }
  .supports { height:auto; min-height:270px; padding-bottom:clamp(0px,calc(-38.6px + 2.68vw),64px) }
  .supports h2 { padding-top:clamp(58px,4vw,125px); line-height:1.2 }
  .apps-viewport { margin-top:clamp(70px,5vw,150px); height:clamp(64px,5vw,105px) }
  .apps-set { padding-left:var(--page-gutter) }
  .app-item { gap:clamp(14px,1vw,28px); padding-right:clamp(72px,5vw,150px); font-size:clamp(20px,calc(12px + .556vw),34px); line-height:1.3 }
  .app-item img { width:clamp(44px,3.5vw,75px); height:clamp(44px,3.5vw,75px) }
  .supports-note { margin-top:clamp(18px,1.6vw,42px); font-size:clamp(11px,calc(6px + .347vw),18px); line-height:1.5 }
  .how { min-height:clamp(1330px,calc(1066px + 18.33vw),1770px); padding-bottom:clamp(72px,5vw,170px) }
  .how h2 { padding-top:clamp(57px,4vw,125px); line-height:1.2 }
  .workflow,.quick-workflow { grid-template-columns:clamp(290px,calc(-41.2px + 23vw),650px) minmax(0,1fr); gap:clamp(70px,5vw,140px) }
  .workflow { grid-template-columns:clamp(280px,calc(-51.2px + 23vw),650px) minmax(0,1fr); margin-top:clamp(100px,7vw,210px) }
  .quick-workflow { margin-top:clamp(67px,5.5vw,150px) }
  .quick-copy { padding-top:clamp(58px,4vw,110px) }
  .step { min-height:clamp(109px,8.5vw,180px) }
  .workflow-steps { gap:clamp(24px,2vw,55px) }
  .step-number,.quick-copy .kicker { font-size:clamp(10px,calc(5.5px + .313vw),17px); line-height:1.4 }
  .step-title,.quick-copy h3 { font-size:clamp(25px,calc(11px + .972vw),48px); line-height:1.28 }
  .step-copy,.quick-copy>p:last-child { font-size:clamp(16px,calc(10.7px + .368vw),25px); line-height:1.55; max-width:34ch }
  /* All states share a content-sized grid cell. Invisible states reserve their
     space so completion padding survives wrapping without a step-change jump. */
  .demo-window,.quick-window { display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; justify-items:center; height:auto; min-height:clamp(523px,calc(126px + 27.57vw),1050px); padding-top:clamp(59px,4.4vw,120px); padding-bottom:clamp(56px,4vw,110px) }
  .demo-card { grid-area:1 / 1; width:min(100%,clamp(660px,calc(228px + 30vw),1150px)); height:auto; min-height:clamp(408px,calc(100px + 21.4vw),820px); padding:clamp(36px,3vw,75px) clamp(48px,4vw,100px) }
  .demo-card[hidden] { display:block; visibility:hidden; pointer-events:none }
  .demo-card h3 { font-size:clamp(34px,calc(21px + .903vw),56px); line-height:1.2; margin-bottom:clamp(20px,2vw,55px) }
  .demo-card .ui-input { font-size:clamp(10px,.7vw,16px); line-height:1.3; margin-bottom:clamp(20px,1.5vw,40px) }
  .demo-card .ui-input span { font-size:clamp(18px,1.3vw,29px); line-height:1.3; min-height:clamp(46px,3.5vw,80px); padding:clamp(12px,1vw,25px) clamp(16px,1.2vw,32px) }
  .demo-card .ui-action { display:flex; align-items:center; justify-content:center; height:auto; min-height:clamp(42px,3vw,70px); font-size:clamp(12px,.85vw,20px); line-height:1.4 }
  .demo-card .ui-small { font-size:clamp(13px,.9vw,20px); line-height:1.4 }
  .demo-card .ui-workspace { height:auto; min-height:clamp(103px,7vw,175px); gap:clamp(20px,2vw,48px) }
  .demo-card .ui-project-folder { width:clamp(80px,5vw,130px); height:clamp(80px,5vw,130px) }
  .demo-card .ui-row { height:clamp(64px,4.8vw,100px); font-size:clamp(17px,1.1vw,27px); line-height:1.3 }
  .demo-card .ui-row span:last-child { font-size:clamp(9px,.65vw,16px) }
  .quick-window .drop-zone { height:clamp(164px,12vw,300px); padding-top:clamp(24px,2vw,55px) }
  .quick-window .drop-zone p { font-size:clamp(18px,1.2vw,30px); line-height:1.4; max-width:28ch; margin-top:clamp(36px,3vw,75px) }
  .quick-control { font-size:clamp(10px,.75vw,18px) }
  .quick-control button { width:clamp(30px,2vw,48px); height:clamp(30px,2vw,48px) }
  .pricing { min-height:clamp(542px,calc(330px + 14.72vw),900px); padding-bottom:clamp(72px,5vw,170px) }
  .pricing h2 { padding-top:clamp(51px,4vw,125px); line-height:1.2 }
  .pricing-cards { gap:clamp(32px,2.5vw,80px); margin-top:clamp(81px,6vw,180px) }
  .price-card { width:calc((100% - clamp(32px,2.5vw,80px))/2); height:auto; min-height:clamp(306px,calc(180px + 8.75vw),520px); padding:clamp(39px,3vw,85px) clamp(40px,3vw,85px) clamp(33px,2.5vw,75px) }
  .price-card h3 { height:clamp(92px,7vw,155px); font-size:clamp(44px,calc(21px + 1.6vw),83px); line-height:1.2 }
  .price-amount { font-size:clamp(76px,calc(34px + 2.92vw),145px); line-height:1.1 }
  .price-period,.price-card.regular .price-period { font-size:clamp(23px,1.65vw,40px); line-height:1.3 }
  .price-card.regular p { font-size:clamp(23px,1.6vw,38px); line-height:1.4 }
  .price-card.enterprise p { font-size:clamp(14px,1vw,24px); line-height:1.5 }
  .price-card.enterprise .price-email { font-size:clamp(13px,.95vw,23px); line-height:1.5 }
  /* Content sets the shared card height; reserve room before the bottom-aligned actions. */
  .price-card p,.price-card .price-email { flex-shrink:0 }
  .price-card.regular p,.price-card.enterprise .price-email { margin-bottom:clamp(21px,1.5vw,40px) }
  .faq { min-height:clamp(1316px,calc(968px + 24.17vw),1900px) }
  .faq h2 { padding-top:clamp(50px,4vw,125px); line-height:1.2 }
  .faq-list { margin-top:clamp(112px,8vw,230px); min-height:clamp(1100px,80vw,1550px) }
  .faq-list::before { left:clamp(514px,39.506%,1050px) }
  .faq-group,.faq-item { width:min(36.883%,980px) }
  .faq-item button { min-height:clamp(60px,4.7vw,100px); font-size:clamp(16px,calc(9px + .486vw),27px); line-height:1.45; padding:clamp(16px,1.2vw,30px) clamp(18px,1.5vw,40px) }
  .faq-answer { left:clamp(548px,42.284%,1150px); width:min(53.858%,1000px); font-size:clamp(16px,calc(10px + .417vw),26px); line-height:1.65; max-width:72ch }
  .faq-answer h3 { font-size:clamp(34px,calc(17px + 1.181vw),62px); line-height:1.25 }
  .footer { min-height:clamp(416px,32vw,700px); padding-top:clamp(96px,8vw,230px) }
  .footer h2 { font-size:clamp(44px,calc(20px + 1.667vw),84px); line-height:1.2 }
  .footer>p { font-size:clamp(11px,.8vw,18px); line-height:1.5 }
  .footer-bottom { margin-top:clamp(26px,3vw,90px); padding-top:clamp(41px,3vw,95px); font-size:clamp(12px,.85vw,20px); line-height:1.5 }
}